Отображение нескольких графиков на одной странице - PullRequest
Новая
       37

Отображение нескольких графиков на одной странице

0 голосов
/ 03 июля 2019

Только один график отображается правильно.Другой создает проблему.

Я хочу, чтобы график работал правильно.Работа, которую я проделал, показана здесь [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>
```````````````````````

1 Ответ

0 голосов
/ 03 июля 2019

Вы звоните 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 }
        ]
    }]
});
...