javascript 使用单个函数显示多个 Highcharts

Question

我正在尝试在不同容器中的同一网页上显示多个 Highcharts 。我知道我可以花很多时间复制并粘贴标准的 highcharts 函数，以将许多图形渲染到不同容器中的页面，但由于我想要显示的 highcharts 数量将取决于从数据库(在下面的示例中，图表的数量将等于@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
   })
}