1

我是 Highcharts 的新手，到目前为止，只有当我的测试图表保存在单独的 .js 文件中时才成功显示它。总的 highcharts_weight.js 代码是：

$(function () { 
    var weightchart = new Highcharts.Chart({
        chart: {
            renderTo: "weight_chart",
            type: 'line'
        },
        title: {
            text: 'weight loss history'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                day: '%e %b'
            }
        },
        yAxis: {
            title: {
                text: 'Weight'
            }
        },
        series: [{
            name: 'Weight loss history',
            data: [[Date.UTC(2013, 1, 1), 87.2],[Date.UTC(2013, 0, 1), 90.2]]
        }]
    });
});

这在我的网页上显示得很好。

但是，如果我尝试将代码放在其他位置，并更改 .js 文件中的图表名称，则除了图表应位于的空白区域外，什么都不会显示。我已尝试将此代码放在 application.html.erb 根标头中的括号内，并在我想用来呈现此表的部分中的括号内，但没有显示任何内容。现在，我在 application.html.erb 中，在标题中，

<script>
        $(function () { 
            var weightchart = new Highcharts.Chart({
                chart: {
                    renderTo: "weight_chart",
                    type: 'line'
                },
                title: {
                    text: 'weight loss history'
                },
                xAxis: {
                    type: 'datetime',
                    dateTimeLabelFormats: {
                        day: '%e %b'
                    }
                },
                yAxis: {
                    title: {
                        text: 'Weight'
                    }
                },
                series: [{
                    name: 'Weight loss history',
                    data: [[Date.UTC(2013, 1, 1), 87.2],[Date.UTC(2013, 0, 1), 90.2]]
                }]
            });
        });
    </script>

它不起作用。有任何想法吗？

4

1 回答 1

0

如果您想在构建 DOM 后立即运行图表，那么最好使用

$(document).ready(function() {
        chart = new Highcharts.Chart({})
 });

这可能会解决问题。

于 2013-10-22T07:52:55.170 回答