如何在堆积的柱高图表中显示额外数据的总数

我有一堆堆积的列,显示约翰和乔吃的某些水果的数量。除了水果的数量之外,我还想展示水果消费的成本是多少。以我为例,我现在可以显示约翰或乔吃的每种水果的量(例如,约翰以100美元的价格吃了5个苹果,而约翰以60美元的价格吃了3个苹果)。但是,我还要显示每个水果的总成本(对于苹果来说,总消费为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}]
        }]
    });
});

样本输出
(来源:rackcdn.com

是否可以显示每个食用水果的总量?悬停列时,说将总计放在“总计”标签旁边。前任。在图中,“总计:8($ 160)”。

非常感谢你!

斯托夫罗兹

房子有点绕,但是您可以使用获得所有系列的数组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/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

高图堆积柱

来自分类Dev

高图表堆积列不显示最小堆积量

来自分类Dev

在高图表柱图中一次显示一个系列数据

来自分类Dev

高图组的堆积柱

来自分类Dev

如何在Google图表堆积列中添加链接

来自分类Dev

如何在jfree图表中显示多个数据系列

来自分类Dev

如何在jfree图表中显示多个数据系列

来自分类Dev

如何在“高图表”中打发时间?

来自分类Dev

如何在“高图表”中打发时间?

来自分类Dev

如何使用高图显示标签中的类别总数

来自分类Dev

高图表堆积列范围

来自分类Dev

如何在java中下载高图表数据?

来自分类Dev

情节:如何在Spyder中显示图表?

来自分类Dev

如何在图表中显示最新值?

来自分类Dev

如何在mpandroidchart中实时显示图表?

来自分类Dev

如何在Google图表中轻松创建比例堆积柱形图?以及如何合并两个图表?

来自分类Dev

Google图表-堆积条形图。如何在每个栏中引入不同的颜色

来自分类Dev

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

来自分类Dev

在图表上声明高图柱的位置?

来自分类Dev

如何在c3js图表中显示php动态数组数据?

来自分类Dev

如何在标记中显示图表点 (x, y) 以外的数据?

来自分类Dev

如何在图表中在 y 轴上显示数据的标签名称?

来自分类常见问题

如何在模板(django)中显示在线朋友的总数?

来自分类Dev

如何在模板(django)中显示在线朋友的总数?

来自分类Dev

如何在输入框中显示数量总数

来自分类Dev

高图表响应数据标签显示

来自分类Dev

如何在matplotlib图表中创建3d框并计算每个框中的点总数?

来自分类Dev

VB.NET图表-显示总数据点的子集

来自分类Dev

高图X轴值位于堆积柱顶部

Related 相关文章

热门标签

归档