Question

我正在使用其中一个Highcharts示例，试图让它显示隐藏系列的百分比值。

Highcharts.chart('container', {
    chart: {
        type: 'area'
    },
    title: {
        text: 'Historic and Estimated Worldwide Population Distribution by Region'
    },
    subtitle: {
        text: 'Source: Wikipedia.org'
    },
    xAxis: {
        categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
        tickmarkPlacement: 'on',
        title: {
            enabled: false
        }
    },
    yAxis: {
        title: {
            text: 'Percent'
        }
    },
    tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.percentage:.1f}%</b><br/>',
        split: true
    },
    plotOptions: {
        area: {
            stacking: 'percent',
            lineColor: '#ffffff',
            lineWidth: 1,
            marker: {
                lineWidth: 1,
                lineColor: '#ffffff'
            }
        }
    },
    series: [{
        name: 'Total',
        data: [1000, 2000, 3000, 4000, 5000, 6000, 10500],
        visable: false
    }, {
        name: 'Asia',
        data: [502, 635, 809, 947, 1402, 3634, 5268]
    }, {
        name: 'Africa',
        data: [106, 107, 111, 133, 221, 767, 1766]
    }, {
        name: 'Europe',
        data: [163, 203, 276, 408, 547, 729, 628]
    }, {
        name: 'America',
        data: [18, 31, 54, 156, 339, 818, 1201]
    }, {
        name: 'Oceania',
        data: [2, 2, 2, 6, 13, 30, 46]
    }]
});

例如，在示例代码中，我想以系列总计的形式显示亚洲，非洲，欧洲，美洲和大洋洲的百分比值。所以亚洲的第一点是：“亚洲：50.2％”。我也希望Total系列完全隐藏，即在底部的图例中看不到。请注意，如果有更好的方法，总数不必是一个系列，它只是最方便的地方。

Answer 1

我认为你在寻找：

...
tooltip: {
    shared:true,
    formatter:function(){
            var myTooltip = '<b>' + this.x + '</b>',
                value,
                total = 0; // Total will be calculeted from series values

        (this.points).forEach(function(item){
            total+=item.y; // Total incrementing
        });

        (this.points).forEach(function(item){
                value = ((item.y / total) * 100).toFixed(2);
            myTooltip += '<br/>' + item.series.name + ': ' + value + ' %';
        });

        myTooltip += '<br/><b>Total : ' + total +'</b>'; // Adding total to the tooltip

        return myTooltip;
   }
},
...

Fiddle

Answer 2

我使用Core972所做的一些工作得到了我想要的东西。这是

tooltip: {
        split: true,
        formatter:function(){
            var myTooltip = '<b>' + this.x + '</b>',
                  value,
                  total = [1000, 2000, 3000, 4000, 5000, 6000, 10500];

            (this.points).forEach(function(item){
                value = ((item.y / total[item.series.data.indexOf( item.point )]) * 100).toFixed(2);
                myTooltip += '<br/>' + item.series.name + ': <b>' + value + '%</b>';
            });
            return myTooltip;
       }
    },

Highcharts显示隐藏系列的百分比

2 个答案: