Как добавить серию в столбчатую диаграмму с определенным индексом

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

Лучшее решение, которое я смог найти, чтобы удалить все серии, сортировать их и добавить их снова. В этом случае его полезно (требуется maby) для хранения данных вне объекта 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 
     })