Highcharts Marimekko图表刷新

下面的脚本构建了一个基本的Marimekko图表，其中的x值是累积的。作为绘制数据的一种令人兴奋的方式，这非常棒。 http://jsfiddle.net/Guill84/1o926coh/Highcharts Marimekko图表刷新

不幸的是，当您在图例中切换区域时，脚本只是“隐藏”相关区域，这意味着图表中存在间隙。如何修改此脚本，以便每次图例中的按钮被切换时重新计算“allSeries”数组？

重复并希望澄清我之后的想法：他的想法是，如果我删除绿色区域，那么黑色和橙色系列应该是相邻的。

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

}）;

让我知道你的想法！

原创剧本：How can I change the width of the bars in a highchart?

来源

2014-12-29 Noobster

您可以使用['legendItemClick'（http://api.highcharts.com/highcharts#plotOptions.series.events.legendItemClick）事件，您可以根据新的计算更新所有系列。要更新系列的点，请使用简单的'chart.series [index] .setData（new_data）'。 –

这正是我所做的:-)感谢帕维尔，很高兴知道我在正确的轨道上。棘手的一点是重建数组（我是一个阵列车） – Noobster

快速问题：我如何返回点击的系列的ID？即第一个将是[0]，第二个[1]等...... – Noobster

再次感谢您帕维尔，这确实是问题的答案。

一个可能的解决方案看起来有点像这样：

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 
           }

来源

2014-12-29 18:55:12 Noobster

Highcharts Marimekko图表刷新

回答

相关问题