Question

在系列中我使用了

series: [
        {
          name: 'High usage',
          data: highUsage,
          color: '#009DDB'
        },
        {
          name: 'Normal usage',
          data: normalUsage,
          color: '#83C580'
        }
]

在工具提示中

tooltip: { 
    crosshairs: [true, true], 
    formatter: function() { 

    }
}

我的JSON格式是

"data": {
    "low_usage": [
      {
        "percentage": 77.9,
        "machine": 3
      },
      {
        "percentage": 22.8,
        "machine": 1
      }
    ],

这里一切正常，但我需要在工具提示中显示机器数量，如百分比：100％（3台机器）
我必须在格式化程序中做什么。

{
"data":{
  "normal_usage":[  
     {  
        "machine":1,
        "percentage":4.3
     },
     {  
        "machine":0,
        "percentage":0
     }
  ],
  "high_usage":[  
     {  
        "machine":0,
        "percentage":0
     },
     {  
        "machine":0,
        "percentage":0
     }
  ]
},
"error_path":"no error",
"success":true
}

这是我的输入格式我根据高使用率和低使用率发送数据

Answer 1

您需要为系列数据添加更多属性，如下所示：

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
     tooltip: {
    crosshairs: [true, true], 
        formatter: function () {
        console.log(this)
            return 'value x ' + this.x +
                'value y ' + this.y + 'value percentage '+this.percentage + '<br/>' + this.point.machine;
        }
    },
    xAxis: {
        categories: ['Green', 'Pink']
    },

    series: [{
        data: [{
            name: 'Point 1',
            color: '#00FF00',
            percentage:"90",
            machine: 153,
            y: 1
        }, {
            name: 'Point 2',
            color: '#FF00FF',
             percentage:"80",
             machine: 153,
            y: 5
        }]
    }]
});

检查我如何在系列数据对象中传递percentage和machine，以便可以使用this在工具提示格式化程序函数中访问这些属性。

工作demo

Angular2如何做highchart tootip formatter - 附加值

1 个答案: