Fixing/discounting a data series when changing chart-type in Highcharts

问题

I'm using highcharts to display two series of data. The first is the primary data, the second is a calculated trend-line based upon the initial data. The trouble is, when changing the chart-type it's counting the trend-line as an equal series and stacking/drawing it along with the first.

I'm trying to either:

Leave the trend-line data as a dashed-line type and changing ONLY the primary data chart type
--or--
Remove/discount the trend-line, if it's not possible to leave it as is.

I've put the exact problem on jsfiddle here.

The HTML dropdown:

<select id="chartType">
  <option value="spline">Spline</option>
  <option value="line">Line</option>
  <option value="column">Column</option>
  <option value="area">Area</option>
</select>

The function I'm using to change the chart type:

 $('#chartType').change(function(){
        changeType(chart.series, this.value);
 });

   function changeType(series, newType) {

       serie = series[0];
       serie.chart.addSeries({
       type: newType,
       name: serie.name,
       color: serie.color,
       data: serie.options.data
       }, false);

       serie.remove();
   chart.redraw();
   }

I've used series[0] as the primary data in my function - as it's the first series to be loaded, but when I randomly cycle through the dropdown options, it seems to almost cycle the series - changing the chart-type of the trend-line... It's almost as though the updated series order swaps after changing type!

Any ideas/hacks/solutions?

The series data:

series: [
  {
    lineWidth: 6,
    name: 'Primary data',
    data: [59.359,60.395,68.830,70.290,73.259,81.344,60.113,60.113,80.644,110.929,96.731,78.104]
  },
  {
    lineWidth: 3,
    dashStyle: 'dash',
    name: 'Trend-line',
    color: '#999999',
    shadow: 0,
    data: [59.259,62.123,64.986,67.850,70.714,73.577,76.441,79.305,82.168,85.032,87.896,90.759]
  }
]

回答1:

What's happening is that you are looking at series[0] each time. But because you are removing a trendline and then adding a new one each time, series[0] changes each time.

So what you need to do is add a sense of consistency, like so:

    for ( i = 0 ; i < series.length ; i++ ) {
        if ( series[i].name == 'Primary data' ) {
            serie = series[i];
        }                
    }            
    // serie = series[0];

来源：https://stackoverflow.com/questions/13715733/fixing-discounting-a-data-series-when-changing-chart-type-in-highcharts

标签

javascript

Highcharts