如何在特定索引的列圖中添加一系列

Question

添加新系列時是否可以設置位置列？

的，我想添加一個新的系列後，並在最後非功能性的代碼做一個例子：

$(function() { 
chart = new Highcharts.Chart({ 
    chart: { 
     type: 'column', 
     renderTo: 'container' 
    }, 
    title: { 
     text: 'Monthly Average Rainfall' 
    }, 
    subtitle: { 
     text: 'Source: WorldClimate.com' 
    }, 
    xAxis: { 
     categories: [ 
      'Jan', 
      'Feb' 
     ], 
     crosshair: true 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'Rainfall (mm)' 
     } 
    }, 
    tooltip: { 
     headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
     pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
      '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', 
     footerFormat: '</table>', 
     shared: true, 
     useHTML: true 
    }, 
    plotOptions: { 
     column: { 
      pointPadding: 0.2, 
      borderWidth: 0 
     } 
    }, 
    series: [{ 
     name: 'Tokyo', 
     data: [49.9, 71.5] 
    }, { 
     name: 'Berlin', 
     data: [32.4, 33.2] 
    }] 
}); 

chart.addSeries({ 
     name: 'New York', 
     data: [83.6, 78.8] 
    }) 

chart.series[0].index = 2; 
chart.series[1].index = 3; 
chart.series[2].index = 1; 
chart.redraw(); 

}); 

鏈接到我的一個的jsfiddle： http://jsfiddle.net/cug79br2/1/

在我的情況做在創建圖表時沒有全部系列，因此我需要在加載附加數據集後重新排列它們。在這個例子中，我想在索引1處添加最後一個系列，並將現有列向右移動一個檔位。

Answer 1

我能找到的最好的解決方法是刪除所有系列，對它們進行排序，再添加。在這種情況下，它有助於保持Highcharts對象之外的數據（有必要）。在我的情況下，一個名爲series_data的數組。

$(function() { 
var chart, series_data; 
series_data = [ 
    { 
     name: 'Tokyo', 
     data: [49.9, 71.5] 
    }, { 
     name: 'Berlin', 
     data: [32.4, 33.2] 
    } 
]; 

chart = new Highcharts.Chart({ 
    chart: { 
     type: 'column', 
     renderTo: 'container' 
    }, 
    title: { 
     text: 'Monthly Average Rainfall' 
    }, 
    subtitle: { 
     text: 'Source: WorldClimate.com' 
    }, 
    xAxis: { 
     categories: [ 
      'Jan', 
      'Feb' 
     ], 
     crosshair: true 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'Rainfall (mm)' 
     } 
    }, 
    tooltip: { 
     headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
     pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
      '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', 
     footerFormat: '</table>', 
     shared: true, 
     useHTML: true 
    }, 
    plotOptions: { 
     column: { 
      pointPadding: 0.2, 
      borderWidth: 0 
     } 
    }, 
    series: series_data 
}); 

while(chart.series.length){ 
    chart.series[0].remove(); 
} 

series_data.push({ 
     name: 'New York', 
     data: [83.6, 78.8] 
    } 
); 

_.each(_.sortBy(series_data, 'data.0').reverse(), function(series, i){ 
    series.index = i; 

    // To keep animations pretty and the last added to animate, do tno add it in the loop but later. 
    if(series.name === 'New York'){ 
    return; 
    } 

    chart.addSeries(series, true, false); 
}) 

chart.addSeries(series_data[2], true, false); 

}); 

http://jsfiddle.net/cug79br2/23/

在添加之後再次它們已被刪除我忽略了「紐約」系列和更高級別增加，但在其上設置索引，以使最新系列將動畫項目。

Answer 2

試試這個

series: [{ 
      name: 'Tokyo', 
      data: [49.9, 71.5], 
      index: 4 
     }, { 
      name: 'Berlin', 
      data: [32.4, 33.2], 
      index: 3 
     }] 
    }); 

    chart.addSeries({ 
      name: 'New York', 
      data: [83.6, 78.8], 
      index: 2 
     }) 
     chart.addSeries({ 
      name: 'New York1', 
      data: [83.6, 78.8], 
      index: 1 
     })