希望在图表加载时仅绘制一个样条,并在加载后进一步添加其他样条

时间:2018-11-14 20:32:50

标签: highcharts

Main multispline chart

HI全部,如图中所示,我正在使用highcharts绘制多样条图。我想要的是在加载图表时仅绘制“ a”,其余的将不可见,我以后可以像这样Higcharts Spline (only one)添加它们。 先感谢您。 这个previous answered question部分适合我的情况,但我不想隐藏所有系列。我想要一个可见的系列。

1 个答案:

答案 0 :(得分:0)

您可以使用Highcharts.Chart.addSeries()方法动态添加其他系列:

HTML:

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>
<button id="btn">Add series</button>

JS:

let data = [{
  name: 'Installation',
  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
  name: 'Manufacturing',
  data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
  name: 'Sales & Distribution',
  data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
  name: 'Project Development',
  data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
  name: 'Other',
  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}];

let btn = document.querySelector('#btn');
let i = 1;

btn.addEventListener('click', () => {
    if (i < data.length) {
    chart.addSeries(data[i]);
    i++;
  }
});

let chart = Highcharts.chart('container', {
  chart: {
    type: 'spline'
  },
  plotOptions: {
    series: {
      marker: {
        enabled: false
      },
      pointStart: 2010
    }
  },
  series: [
    data[0]
  ]
});

演示: https://jsfiddle.net/BlackLabel/rtsznykp/3/