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

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。例如：

  labelFormatter: function() {
    var target = '<br>Target: ' + this.userOptions.target || 0,
      installs = 1,
      string, img;
    Highcharts.each(this.userOptions.data, function(p, i) {
      installs += p;
    });
    if (this.name === "Women") {
      img = '<img src = "http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Woman_Silhouette_52.svg/2000px-Woman_Silhouette_52.svg.png" style = "width:45px"/> ';
    } else if (this.name === "Men") {
      img = '<img src = "https://upload.wikimedia.org/wikipedia/commons/1/17/Human_outline.svg" style = "width:20px"/> ';
    }
    string = '<div style = "width: 200px">' + '<div class = "leg">' + img + '</div>' + '<div class = "leg">' + this.name + target + '<br>Installs: ' + installs + '</div>' + '</div>';
    return string
  }

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

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

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