在一页中显示多个图表

Question

仅正确显示一张图表。另一个正在出问题。

我想让图表正常工作。 [https://i.stack.imgur.com/Nn98E.png]显示在这里我所做的工作。我确实知道问题是因为js是从同一链接中获取的，但是如何克服此问题呢？

js代码如下所示：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<!--
    <script src="//code.highcharts.com/themes/sand-signika.js"></script>
    -->
<script>
  // Radialize the colors
  Highcharts.setOptions({
    colors: Highcharts.map(Highcharts.getOptions().colors, function(color) {
      return {
        radialGradient: {
          cx: 0.5,
          cy: 0.3,
          r: 0.7
        },
        stops: [
          [0, color],
          [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
        ]
      };
    })
  });

  // Build the chart
  Highcharts.chart('CWT_ICX', {
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: 'pie'
    },
    title: {
      text: 'Carrier Wise Traffic -- IGW '
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: true,
          format: '<b>{point.name}</b>: {point.percentage:.1f} %',
          connectorColor: 'silver'
        }
      }
    },
    series: [{
      name: 'Carrier Data',
      data: [
        { name: 'Chrome', y: 61.41 },
        { name: 'Internet Explorer', y: 11.84 },
        { name: 'Firefox', y: 10.85 },
        { name: 'Edge', y: 4.67 },
        { name: 'Safari', y: 4.18 },
        { name: 'Other', y: 7.05 }
      ]
    }]
  });
</script>

<!--Script CWT_ICX Ends -->

<script>

// Radialize the colors
Highcharts.setOptions({
  colors: Highcharts.map(Highcharts.getOptions().colors, function(color) {
    return {
      radialGradient: {
        cx: 0.5,
        cy: 0.3,
        r: 0.7
      },
      stops: [
        [0, color],
        [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
      ]
    };
  })
});

// Build the chart
Highcharts.chart('CWT_IGW', {
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
  },
  title: {
    text: 'Carrier Wise Traffic -- IGW '
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
        connectorColor: 'silver'
      }
    }
  },
  series: [{
    name: 'Carrier Data',
    data: [
      { name: 'Chrome', y: 61.41 },
      { name: 'Internet Explorer', y: 11.84 },
      { name: 'Firefox', y: 10.85 },
      { name: 'Edge', y: 4.67 },
      { name: 'Safari', y: 4.18 },
      { name: 'Other', y: 7.05 }
    ]
  }]
});
</script>
```````````````````````

Answer 1

您要调用Highcharts.setOptions两次，但只需要调用一次（这意味着要设置 global 选项，即您要应用于图表上每个图表的选项）。页）。两次调用是导致您出现问题的原因。

您有两个选择：

• 如果您希望每个图表都具有相同的选项，则一个调用就足够了，因此您可以删除第二个调用（请参见https://jsfiddle.net/Metoule/p9b6n32f/4/）

• 如果每个图表都需要不同的颜色，则可以使用chart.colors选项（请参见https://jsfiddle.net/Metoule/p9b6n32f/7/）为每个图表设置颜色：

Highcharts.chart('CWT_IGW', {
    /* 
       THIS can either be set for each chart (like here),
       or for each chart (via the setOptions call) 
    */
    colors: Highcharts.map(Highcharts.getOptions().colors, function(color) {
        return {
            radialGradient: {
                cx: 0.3,
                cy: 0.5,
                r: 0.9
            },
            stops: [
                [0, color],
                [1, Highcharts.Color(color).brighten(+0.3).get('rgb')] // lighten
            ]
        }; 
    }),
    /* other graph options omitted for brevity */
    series: [{
        name: 'Carrier Data',
        type: 'pie',
        data: [
            { name: 'Chrome', y: 61.41 },
            { name: 'Internet Explorer', y: 11.84 },
            { name: 'Firefox', y: 10.85 },
            { name: 'Edge', y: 4.67 },
            { name: 'Safari', y: 4.18 },
            { name: 'Other', y: 7.05 }
        ]
    }]
});