显示除x和y轴值以外的其他值

时间:2019-01-29 11:55:15

标签: javascript highcharts

需要在鼠标悬停工具提示值上显示不同的值,而不是在高图上显示x和y轴值。

在需要使用graphValue的图表上显示数据,在actualValue的工具提示上显示数据。

data = [
{'graphValue': 10, 'actualValue': 10 },
{'graphValue': 20, 'actualValue': 20 },
{'graphValue': 0, 'actualValue': -15 },
{'graphValue': 10, 'actualValue': 10 },
{'graphValue': 0, 'actualValue': -20 },
{'graphValue': 10, 'actualValue': 10 },
{'graphValue': 0, 'actualValue': -20 },
{'graphValue': 15, 'actualValue': 15 }
]

请让我知道如何实现这一目标。谢谢。

演示: https://jsfiddle.net/52jr6p9z/

2 个答案:

答案 0 :(得分:2)

您可以通过tooltip选项将自定义点属性添加到pointFormat

tooltip: {
    pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.actualValue}</b><br/>'
},

实时演示:https://jsfiddle.net/BlackLabel/06jawfo1/

API参考:https://api.highcharts.com/highcharts/tooltip.pointFormat

答案 1 :(得分:-1)

我认为您需要像这样给每个数据提供自己的对象

Highcharts.chart('container', {
   tooltip: {
  formatter: function() {
  console.log(this);
    return 'The real value is <b>'+ this.key+ '</b>';
  }
},

    series: [{
        name: 'a',
        data: [{name:10,y:20},20,{name:'-10',y:0},10,0,10,0,15]
    }]

});

    });

https://jsfiddle.net/xqw7vyuf/