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

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/

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

How do I calculate the total Data values for both and display in Legend

legend

highcharts