Highcharts angular.js 自定义工具提示

Question

我正在研究以下示例 https://jsfiddle.net/neelkamal0666/6737c2q5/

Highcharts.chart('container', {
        chart: {
          type: 'column'
        },
        colors: ["rgb(241,198,64)", "#0091ea"],
        title: {
          text: '&nbsp;',
          useHTML : true
        },
        xAxis: {
          categories: ['Sowing', 'Activity', 'Application', 'Harvest']
        },
        yAxis: {
          min: 0,
          title :'',
          stackLabels: {
            enabled: false,
            style: {
              fontWeight: 'bold',
              color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
          }
        },
        legend: {
          align: 'right',
          x: -30,
          verticalAlign: 'top',
          y: 25,
          floating: true,
          backgroundColor: 'white',
          borderColor: '#CCC',
          borderWidth: 1,
          shadow: false
        },
        credits: {
          enabled: false
        },
        tooltip: {
          shared: false,
          backgroundColor: 'black',
          borderColor: 'black',
          borderRadius: 10,
          color: 'white',
          useHTML :true,
          borderWidth: 3,
          headerFormat: '<b style="color: #fff;">{point.x}</b><br/>',
          pointFormat: '<b style="color: #fff;">{series.name}: {point.y}</b><br/><b style="color: #fff;">Total(%): {point.stackTotal}</b><br />',
          /*formatter: function () {
            var s = '<b>' + this.x + '</b>';
            angular.forEach(this.points, function () {
              s += '<br/>' + this.series.name + ': ' +
                this.y + 'm';
            });

            return s;
          } */
        },
        plotOptions: {
          column: {
            stacking: 'normal',
            dataLabels: {
              enabled: false,
              color:  'white',
              style: {
                textShadow: ''
              }
            }
          },
          series: {
            pointWidth: 50, //width of the column bars irrespective of the chart size
            additional : ["Sowing Area", "Activity", "Application", "Harvest"]
          }
        },
        series: [{
          name: 'Pending(%)',
          data: [60, 40, 20, 80],

        }, {
          name: 'Completed(%)',
          data: [40, 60, 80, 20],

        }]

      });

在工具提示上我想显示不同的值例如，如果用户点击播种，它将显示

Pending : 60
Total : 100
Sowing Area : 4500 H
Plots Audited : 1200 H

并且当用户点击活动时，它会显示

  Pending : 40,
  Completed : 60,
  Total : 100,
  Total Activities : 200
  Closed Activities : 125

当用户点击应用程序时，会显示

Pending :20,
Completed :80
Total :100,
Per acre usage : 200

并且当用户点击收获时，它会显示

Pending :80,
Completed :20
Total :100,
Volume Forcast : 100MT

我阅读了 Highchart 的文档并查看了很多示例，但仍然无法弄清楚如何实现这一点。

有人可以帮忙吗？

Answer 1

要更改工具提示显示，您可以为每个数据点添加更多信息，稍后访问它并在 tooltip 的 formatter 中进行设置。

示例：https://jsfiddle.net/woo70ers/

将所有额外信息放在另一个数组中可能更容易 - 循环也更容易，无论附加信息是什么。

简单示例：http://jsfiddle.net/am5ynoLg/

    tooltip: {
      formatter: function() {
        var ret = 'x: ' + this.x + ', y: ' + this.y;
        Highcharts.each(this.point.extraForTooltip, function(info) {
          ret += '<br/>' + info[0] + ': ' + info[1];
        });
        return ret;
      }
    },
    series: [{
      data: [
        [0, 1, [['opt1',123],['opt2','nice']] ],
        [1, 2, [['opt2','bueno'],['opt3','ESP_#42']] ]
      ],
      keys: ['x', 'y', 'extraForTooltip']
    }]

Highcharts angular.js 自定义工具提示

Highcharts angular.js custom tooltip

charts

highcharts

highstock

angularjs