Highcharts Marimekko图表刷新 [英] Highcharts Marimekko chart refresh

问题描述

下面的脚本构建了一个基本的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} 
]; 
 
函数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; 
} 
返回allSeries; 
 
 $ b $（'＃container'）。highcharts（{
图表：{type：'area'}，
 xAxis：{
 tickLength ：0，
 labels：{enabled：true} 
}，
 yAxis：{
 title：{enabled：false} 
}，
 plotOptions： {
 
 area：{
 lineWidth：0，
 marker：{
 enabled：false，
 states：{
 hover：{enabled ：false} 
} 
} 
} 
}，
 
系列：makeSeries（rawData）
}）; 
  

}）;

让我知道你的想法！

原始脚本：

解决方案

div>

再次感谢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}; 
 ...然后用新数组更新系列
} 
  

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?

解决方案

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图表刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！