javascript - 简单的 Highchart 作为单独的 .js 文件工作，但不在 View 中

Question

我是 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 的根 header 中的括号内，以及我想用来呈现此表的部分中的括号内，但随后什么也没有显示。现在，我把它放在 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>

而且它不起作用。有什么想法吗？

Answer 1

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

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

这可能会解决问题。