是否可以使用一个 id 拥有多个高图表

Is it possible to have multiple highcharts with one id?

本文关键字：id 拥有 高图表 一个 是否 可以使      更新时间：2023-09-26

我在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未知并且因用户而异时，生成多个高图表的最佳方法是什么？

您可以改用一个类，并循环遍历每个实例，随时创建图表。像这样：

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

相关文章：