Highcharts Marimekko chart refresh

问题:

The script below builds a basic Marimekko chart where the x-values are cumulative. This is awesome as an exciting way to plot data. http://jsfiddle.net/Guill84/1o926coh/

Unfortunately, when you toggle areas in the legend, the script simply 'hides' the areas concerned, meaning that there are gaps in the chart. How could I amend this script so the "allSeries" array is recalculated each time a button in the legend is toggled?

To repeat and hopefully clarify what I'm after: tHe idea is that if I remove the green area, then the black and orange series should be adjacent.

$(function () {     var rawData = [         { name: 'A', x: 5, y: 5.6 },         { name: 'B', x: 3, y: 10.1 },         { name: 'C', x: 11, y: 1.2 },         { name: 'D', x: 2, y: 17.8 },         { name: 'E', x: 8, y: 8.4 }     ];  function makeSeries(listOfData) {     var sumX = 0.0;     for (var i = 0; i < listOfData.length; i++) {         sumX += listOfData[i].x;     }     var allSeries = []     var x = 0.0;     for (var i = 0; i < listOfData.length; i++) {         var data = listOfData[i];         allSeries[i] = {             name: data.name,             data: [                 [x, 0], [x, data.y],                 {                     x: x + data.x / 2.0,                     y: data.y,                     dataLabels: { enabled: false, format: data.x + ' x {y}' }                 },                 [x + data.x, data.y], [x + data.x, 0]             ],             w: data.x,             h: data.y         };         x += data.x + 0;     }     return allSeries; }  $('#container').highcharts({     chart: { type: 'area' },     xAxis: {         tickLength: 0,         labels: { enabled: true}     },     yAxis: {         title: { enabled: false}     },     plotOptions: {          area: {             lineWidth: 0,             marker: {                 enabled: false,                 states: {                     hover: { enabled: false }                 }             }         }     },      series: makeSeries(rawData) }); 

});

Let me know your thoughts!

Original script: How can I change the width of the bars in a highchart?

回答1:

Thank you again Pawel, that is indeed the answer to the question.

A possible solution looks a bit like this:

legendItemClick: function () {                     var pos = this.index;                     var sname = this.name;                     var chart = $('#container').highcharts();                     while(chart.series.length > 0)                     chart.series[0].remove(true);                     rawData[pos]= { name: sname, x: 0, y: 0 };                             ... then update the series with the new array                                 }      

文章来源: Highcharts Marimekko chart refresh