Question

我试图在Highcharts折线图的xAxis标签中包含我的点中的一些额外数据。

我正在这样创建我的观点。 xAxis是“ datetime”类型，我正在使用自定义tickPositions（这部分工作正常）。

for (row of results) {
    var point = {x:Date.parse(row.time), y:row.value, magicNumber:row.ID};
    data_series.data.push(point);
    chartConfig.xAxis.tickPositions.push(Date.parse(row.time));
}

在工具提示中，我可以执行以下操作（有效）：

tooltip: {          
    formatter: function() {
        return 'ID: ' + this.point.magicNumber + '  Value:' + this.point.y.toFixed(3);
    },
},

如何在xAxis格式化程序中进行等效处理？从the docs不清楚是否可行。

 xAxis: {
        type: 'datetime',
        labels: {
            rotation: 90,    
            formatter: function () {
                var ID = **What goes here to obtain magicNumber?** 

                var datetime = new Date(this.value);
                return ID.toString() + ' ' + datetime.toISOString();
            }
        },

        tickPositions: []
}

Answer 1

尝试一下，如果我的解决方案不起作用，console.log(this);应该给您提示。

 xAxis: {
    type: 'datetime',
    labels: {
        rotation: 90,    
        formatter: function () {
            console.log(this);
            var ID = this.chart.series[0].data[this.pos].magicNumber;

            var datetime = new Date(this.value);
            return ID.toString() + ' ' + datetime.toISOString();
        }
    },

    tickPositions: []

}

Answer 2

两个格式化程序都有不同的上下文，因此一种解决方法是遍历数据的每个点（在xAxis.labels.formatter函数内部），找到与{ {1}}，并将其分配给某个变量。应该足够了，但是当所有点都不适合刻度值时，有可能返回一个空对象。

实时示例：https://jsfiddle.net/2r8z5wny/

如何在Highcharts xAxis标签中包含来自点的数据？

2 个答案: