javascript - 一个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') 没有返回任何内容。其次，这是正确的思考方式吗？我目前正在动态生成 haml div id="ownershipChart" 所以每次都动态生成一个 highcharts js 对象也感觉不对。

当附加的 div id 未知且因用户而异时，生成多个 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 的引用填充，这意味着数据将从迭代中的当前元素读取。