Question

我为2系列男士和女士创建了一个highcharts类型列。我想显示总计数，即安装并显示在图例下方。

如何将HTML与带有总值的图标一起使用。

以下是我的代码和JSFiddle

$(function () {
$('#stats-container').highcharts({

    chart: {
        type: 'column'
    },
    credits: {
    enabled: false
    },
   title: null,

    xAxis: {
      categories: ['15-20', '20-25', '25-30', '30-35', '35-40', '40-45', '45-50']
    },

    yAxis: {
    min: 0,
    max: 90,
    pointInterval: 30,
    labels: {
                formatter: function () {
                return this.value + 'K';
      }
            },
            title: null
    },

    tooltip: {
        formatter: function () {
            return '<b>' + this.x + '</b><br/>' +
                this.series.name + ': ' + this.y;
        }
    },

    navigation: {
        buttonOptions: {
            enabled: false
        }
    },
            legend: {
        enabled: true,
        align: 'center',
        verticalAlign: 'top',
        layout: 'horizontal'

    },
    series: [{
        name: 'Men',
        color: '#79ccde',
        data: [57.56, 82, 32, 28, 12, 13, 7],
        stack: 'male'
    }, {
        name: 'Women',
        color: '#8787f5',
        data: [33.66, 60, 35, 15, 10, 16, 9],
        stack: 'female'
    }]
});
});

如何使用总计数和自定义HTML实现相同的图例？

Answer 1

要计算两个系列的总值并在图例中显示它，您可以使用legend.labelFormatter： http://api.highcharts.com/highcharts#legend.labelFormatter

在labelFormatter函数中，您可以遍历所有系列点，并将其值添加到要在标签中显示的总和。

如果要将图像添加到图例标签，则需要将 legend.useHTML 设置为 true ： http://api.highcharts.com/highcharts#legend.useHTML

然后您可以将图例格式化为HTML div。例如：

{{1}}

要隐藏标准图例符号，可以将其宽度设置为0： http://api.highcharts.com/highcharts#legend.symbolWidth

如果要以与在图像中显示的方式相同的方式显示工具提示，可以使用tooltip.shared属性： http://api.highcharts.com/highcharts#tooltip.shared

例如： http://jsfiddle.net/am6zjhrj/10/

如何计算两者的总数据值并在图例中显示

1 个答案: