Highcharts Marimekko 图表刷新答案

【问题标题】：Highcharts Marimekko chart refreshHighcharts Marimekko 图表刷新
【发布时间】：2014-12-29 15:55:57
【问题描述】：

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

不幸的是，当您切换图例中的区域时，脚本只会“隐藏”相关区域，这意味着图表中存在间隙。我如何修改此脚本，以便每次切换图例中的按钮时重新计算“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?

【问题讨论】：

您可以使用legendItemClick事件，您可以在其中根据新的计算更新所有系列。要更新系列的点，请使用简单的chart.series[index].setData(new_data)。
这正是我正在做的 :-) 谢谢 Pawel，很高兴知道我在正确的轨道上。棘手的一点是重建数组（我有点数组车）
快速问题：如何返回点击的系列的 ID？即第一个是 [0]，第二个是 [1]，依此类推...
.... 我找到了。 this.index

标签： javascript jquery highcharts highstock

【解决方案1】：

再次感谢 Pawel，这确实是问题的答案。

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

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  
                              }

【讨论】：