在Highcharts中更改图表类型时修复/折扣数据系列

时间:2012-12-05 03:16:20

标签: javascript highcharts

我正在使用highcharts来显示两个系列的数据。第一个是主要数据,第二个是基于初始数据的计算趋势线。问题是,当更改图表类型时,它会将趋势线计为相等的系列,并将其与第一个一起堆叠/绘制。

我正试图:

  • 将趋势线数据保留为虚线类型并仅更改主数据图表类型
    - 或 -
  • 如果无法保留趋势线,请删除/折扣趋势线。

我已将确切问题放在jsfiddle here上。

HTML下拉列表

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

我用来更改图表类型的功能:

 $('#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();
   }

我在我的函数中使用series[0]作为主要数据 - 因为它是第一个要加载的系列,但是当我随机循环显示下拉选项时,它似乎几乎循环系列 - 更改图表 - 趋势线的类型......几乎就像更新的系列订单在更改类型后交换一样!

任何想法/黑客/解决方案?

系列数据:

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 个答案:

答案 0 :(得分:1)

发生的事情是你每次都在看系列[0]。但是因为您要删除趋势线,然后每次添加一个新趋势线,系列[0]每次都会更改。

所以你需要做的就是增加一致感,如下所示:

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