如何修改Highcharts中的列堆积百分比图表

Question

我想更改此图表的功能：http://www.highcharts.com/demo/column-stacked-percent

以这种方式，当我点击图例时，正在计算的百分比应该从所有数据系列而不仅仅是可见数据系列中制定。现在点击图例，列总是变为100％。

Answer 1

试试这个fiddle，我所做的就是使用formatter代替pointformat

  tooltip: {
        formatter: function () {
            var s=0;
            var r="<span>"+this.x+"</span><br/>"


            $.each(this.points, function (i,v) {
                console.log(v);

                r+='<span style="color:'+v.color+'">'+v.series.name+'</span>: <b>   '+v.y+'</b>  '+((v.y*100)/total)+'% <br/>'
            });

            console.log(r);
            return r;

        },
        shared:true
    },

以及更多我已经添加了一些全局变量

var obj=Highcharts.charts[$("#container").data('highchartsChart')]; 

var total=0;
for(v of obj.options.series){
    for(z of v.data){
    total+=z;
  }
}
console.log(total);

Answer 2

可以将ignoreHiddenSeries设置为false，但在这种情况下隐藏除最顶层之外的系列不会使其他系列掉落以填补堆栈中的空白。

示例：http://jsfiddle.net/pahyq9b9/

另一种解决方案是解析您的数据并使用normal堆叠而不是percent，因为正常堆叠只会移动其他点而不会更改点值。