Highcharts - 带有 y 轴值的时间序列图表需要用文本标签分组

如何解决Highcharts - 带有 y 轴值的时间序列图表需要用文本标签分组

需要显示 y 轴值（作为文本标签），它应该如下所述分组，x 轴应该是日期时间。

• 差 - > 20

• 错误的值 11 到 20

• 好 - 值 1 到 10

因此 y 轴将有 3 个刻度/标签 - 好、坏和差

http://jsfiddle.net/Wk7sF/

$('#container').highcharts({ 图表： { 类型：'线' },

    xAxis: {
        type:  "datetime"
    },series: [
        {
            data: [[1611319680000,4],[1611319860000,5],[1611320040000,11],[1611320220000,14],[1611320400000,1],[1611320580000,22],[1611320760000,19],[1611320940000,20],[1611321120000,9],[1611321300000,9]]
           
        },]
});

请如果有人能指导我解决这个问题

解决方法

您可以将 y 数据映射到值：3 - 'Poor',2 - 'Bad',1 - 'Good' 并使用 formatter 函数作为标签来呈现特定文本。示例：

const data = [
    [1611319680000,4],...
];
const categories = ['','Good','Bad','Poor'];

Highcharts.chart('container',{
    chart: {
        type: 'column'
    },xAxis: {
        type: 'datetime'
    },yAxis: {
        min: 0,max: 3,labels: {
            formatter: function() {
                return categories[this.pos];
            }
        }
    },series: [{
        data: data.map(el => el[1] > 20 ? 3 : (el[1] > 10 ? 2 : 1))
    }]
});

---

现场演示： http://jsfiddle.net/BlackLabel/Lj4o2ent/

API 参考： https://api.highcharts.com/highcharts/yAxis.labels