一个id可以有多个highcharts吗？

Question

我在haml有以下场景：

#ownershipChart{"chart-data" => [["pie1", 100], ["pie2", 150], ["pie3", 200]]}
#ownershipChart{"chart-data" => [["pie4", 45], ["pie5", 50], ["pie6", 20]]}

在javascript中：

$(function(){
  $('#ownershipChart').highcharts({
    chart: {
      type: 'pie'
    },
    title:{
      text: 'Ownership'
    },
    plotOptions:{
      pie:{
        allowPointSelect: true
      }
    },
    series: [{
      type: 'pie',
      name: 'Ownership',
      data: $('#ownershipChart').attr('chart-data')
    }]
  });
});

如您所见，我正在尝试创建一个同时适用于这两个图表的 highcharts 函数。首先，我知道这是不正确的，因为 $('#ownershipChart').attr('chart-data') 没有返回任何内容。其次，这是正确的思考方式吗？我目前是动态生成hamldiv id="ownershipChart"所以每次动态生成highcharts js对象也感觉不对。

当它们所附加的div ids 是未知的并且因用户而异时，生成多个 highcharts 的最佳方法是什么？

Answer 1

您可以改为使用一个类，并在创建图表时遍历每个实例。像这样的：

$(function () {
    $('.ownershipChart').each(function()  {
        $(this).highcharts({
            chart: {
                type: 'pie'
            },
            title: {
                text: 'Ownership'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true
                }
            },
            series: [{
                type: 'pie',
                name: 'Ownership',
                data: $(this).attr('chart-data')
            }]
        });
    });
});

请注意，data 属性由对this 的引用填充，这意味着数据将从迭代中的当前元素中读取。