首先，我对凌乱的脚本表示歉意。由于我所在的资源有限，我只能使用记事本。
当我绘制散点图时，工具提示会以数字形式返回 point.y 值。我想通过在 yAxis 中使用类别名称来显示 one、two、Very Berry 等字符串，而不是数字值。
<html>
<head>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 100%; max-width: 100%; margin: 0 auto"></div>
<script>
Highcharts.chart('container', {
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Some title'
},
xAxis: {
title: {
enabled: true,
text: 'Date'
},
type: 'datetime',
labels:
{
formatter: function () {
return Highcharts.dateFormat("%b %Y", this.value);
}
}
},
yAxis: {
title: {
text: 'Rank goes to 10000'
},
categories: [
'One',
'Two',
'Three',
'Four',
'Five',
'Six',
'Seven',
'Eight',
'Nine',
'Ten'
],
type: 'category'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 0,
y: 0,
floating: false,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 6,
fillOpacity:0.3,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'Rank: {point.y} <br>Date: {point.x:%b %e, %Y}'
}
}
},
series: [{
name: 'Beer',
data: [
[Date.UTC(2018, 2, 23), 1],
[Date.UTC(2009, 5, 22), 2],
[Date.UTC(2018, 6, 1), 3],
[Date.UTC(2009, 9, 11), 4],
[Date.UTC(2018, 11, 30), 5],
[Date.UTC(2009, 10, 10), 6],
[Date.UTC(2013, 12, 1), 7],
[Date.UTC(2015, 4, 6), 8],
[Date.UTC(2005, 2, 1), 9],
[Date.UTC(2010, 1, 1), 10]
]
},{
name: 'Wine',
color: 'rgba(223, 83, 83, .9)',
data: [
[Date.UTC(2012, 1, 1), 8]
]
}
]
});
</script>
</body>
</html>
最佳答案
使用tooltip.pointFormat Api Doc ，你可以做你正在寻找的事情
var yCategories = [
'One',
'Two',
'Three',
'Four',
'Five',
'Six',
'Seven',
'Eight',
'Nine',
'Ten'
];
...
tooltip: {
//headerFormat: '<b>{series.name}</b><br>',
//pointFormat: 'Rank: {point.y} <br>Date: {point.x:%b %e, %Y}',
pointFormatter: function() {
var formatedDate = new Date(this.x).toLocaleDateString("en-US")
return '<b>' + this.series.name + '</b><br>' +
'Rank: ' + yCategories[this.y - 1] + '<br>Date: ' + formatedDate
}
}
关于javascript - 如何在 Highcharts 散点图中显示类别名称而不是 point.y？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53125917/