Question

我正在尝试在不同容器中的同一网页上显示多个高级图表。我知道我可以复制并粘贴一个标准的highcharts函数一堆时间来将不同的图形渲染到不同容器中的页面，但是因为我想要显示的高级图表的数量将取决于从a中提取的值。数据库（在下面的例子中，图表的数量将等于@value）我理想上只想写一个highcharts函数，并多次循环它，在每次迭代中我想将图表选项设置为不同的。我尝试了以下代码的各种排列：

for (i = 0; i <= <% @value %>; i ++){
    $(function (i) {
       graphTitleArray = <% @markers.split(',') %>
       graphTitle = graphTitleArray[i]
       graphData = <% @array[i].to_json %>
       switch(i){
          case 0:
             containerNum =  'container0'
          case 1:
             containerNum = 'container1'

          ...
       }
       $(containterNum).highcharts({
          title: {
             text: graphTitle
          }
          series: [{
                name: 'something',
                data : graphData
            }]
         //more options here
       })
    }
}

多次尝试这种策略后，我无法让图形渲染或让函数识别'i'的正确值。有谁知道更好的方法吗？谢谢！

Answer 1

我认为你选错了容器。我在下面更正了它（假设诸如'container0'之类的值是容器的id），包括删除不需要的case语句。

for (i = 0; i <= <% @value %>; i ++){
   graphTitleArray = <% @markers.split(',') %>
   graphTitle = graphTitleArray[i]
   graphData = <% @array[i].to_json %>

   $('#container'+i).highcharts({
      title: {
         text: graphTitle
      }
      series: [{
            name: 'something',
            data : graphData
        }]
     //more options here
   })
}

javascript使用单一功能显示多个Highcharts

1 个答案: