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')
    }]
  });
});

正如您所知，我正在尝试创建一个同时应用于这两个图表的高图功能。首先，我知道这是不正确的，因为$('#ownershipChart').attr('chart-data')并未返回任何内容。其次，这是考虑它的正确方法吗？我目前正在动态生成haml div id="ownershipChart"，因此每次感觉错误时动态生成一个highcharts js对象。

在附加div id的情况下生成多个高级图表的最佳方法是什么？未知并且用户会因用户而异？

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的引用填充，这意味着将从迭代中的当前元素读取数据。

是否有可能有一个id的多个highcharts？

1 个答案: