Question

我有一个堆积的列显示John和Joe吃掉的某些水果的数量。除了水果的数量，我还想表明他们的水果消费成本是多少。在我的情况下，我现在可以显示约翰或乔吃掉的每种水果的数量（例如约翰以100美元吃掉5个苹果，而乔吃掉3个苹果用于60美元）。但是，我还要展示他们每个水果的总成本（对于苹果，总消费是8个苹果，价值160美元）。有没有办法可以做到这一点？

您可以在此处查看我的初步工作：http://jsfiddle.net/SpzBa/

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Stacked column chart'
        },
        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total fruit consumption'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -70,
            verticalAlign: 'top',
            y: 20,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.x +'</b><br/>'+
                    this.series.name +': '+ this.y + ' (<b>$ ' + this.point.Amount +') <br/>'+
                    'Total: '+ this.point.stackTotal;
            }
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black, 0 0 3px black'
                    }
                }
            }
        },
        series: [{
            name: 'John',
            data: [{y: 5, Amount: 100}, {y: 3, Amount: 60}, {y: 4, Amount: 80}]
        }, {
            name: 'Joe',
            data: [{y: 3, Amount: 60}, {y: 4, Amount: 80}, {y: 4, Amount: 80}]
        }]
    });
});

sample output http://57fe73bf7b181243cedb-b8c91974e8361932eb0600d0df360924.r68.cf4.rackcdn.com/Untitled.png

是否可以显示每个水果消耗的总量？比如说在悬停列时将总量放在“总计”标签旁边。防爆。在图中，“总计：8（$ 160）”。

非常感谢！

Answer 1

这有点像房子，但你可以得到一个包含this.series.chart.series的所有系列的数组，每个系列都有一个点数组，你可以用你当前的this.point.x作为索引，所以通过迭代所有系列，您可以计算Amount属性的总计。

tooltip: {
    formatter: function() {
        var allSeries = this.series.chart.series;
        var totalAmount = 0;
        for(var s in allSeries) { totalAmount += allSeries[s].points[this.point.x].Amount; }

        return '<b>'+ this.x +'</b><br/>'+
            this.series.name +': '+ this.y + ' (<b>$ ' + this.point.Amount +') <br/>'+
            'Total: '+ this.point.stackTotal + ' (<b>$ ' + totalAmount +')';
    }
}

http://jsfiddle.net/SpzBa/1/

如何在堆叠列高图中显示额外数据的总数

1 个答案: