Question

我已经编写了一些代码来为地图中的每个元素（@map）创建并向我的网页呈现高图表图表。在过去的几个小时里，我一直难过，试图找出代码中的问题所在。到目前为止，我有以下代码：

<script>
i = 0;
<% @map.each do |name, arr| %>
    graphTitle = String('<%= name %>')
    dataVector = <%= arr %>
    containerNum = 'container' + i
    var chart1 =  new Highcharts.Chart({ 
        chart: {
            renderTo: containerNum,
            backgroundColor: {
                linearGradient: [0, 0, 500, 500],
                stops: [
                    [0, 'rgb(255, 255, 255)'],
                    [1, 'rgb(240, 240, 255)']
                ]
            },
            borderWidth: 2,
            plotBackgroundColor: 'rgba(255, 255, 255, .9)',
            plotShadow: true,
            plotBorderWidth: 1
        },
        title : {
            text : graphTitle,
            x: -20
        },
        yAxis: {
            title: {
                text: 'Count'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        xAxis: {
            title :{
                text: 'Time (Hours)'
            },
            categories: <%= @timeArray.to_json%>
        },
        series: [{
            name: graphTitle,
            data :  dataVector
        }]
    });
    i = i + 1
<% end %>

我很困惑，因为当我尝试单独渲染图形（而不是遍历数组）时，图表显示正常。此外，javascript控制台不显示任何错误。有谁知道我做错了什么？我的div被命名为'container0'，'container1'和'container2'（并且地图只有三个元素）。谢谢！编辑：实际上我只是在javascript控制台中看到它给出了错误Uncaught Highcharts错误＃13：这意味着renderTo：containerNum行

中存在错误

Answer 1

解决：在我的控制台中看到错误13后，我发现了stackoverflow帖子： How can I fix Highcharts error #13? 这指出了正确的答案。我需要将所有内容都包装在$（function（）{

中

高图图表无法渲染

1 个答案: