时间戳

首页 > 解决方案 > 修复 Highchart 图表上的最小/最大值标志

javascript - 修复 Highchart 图表上的最小/最大值标志

问题描述

我有一个 xAxis 为日期时间的 Highchart 图，在 yAxis 上我有不同的数据。我想在最小值和最大值上放置标记，但是每个数据系列都会显示标志，如何修复它。谢谢。

每个系列数据都显示标志

我的 JsFiddle

我想像这样显示 Highchart

标志只显示我所期望的单系列数据

这是我的代码：

var newArr = [];
Highcharts.chart('container', {
chart: {
    type: 'spline',
    events: {
        load: function(){
            var chart = this;
            for(var i = 0; i < chart.series[0].processedXData.length; i++){
                newArr.push({
                    y: chart.series[0].processedYData[i],
                    x: chart.series[0].processedXData[i]
                })
                var maxY = Math.max.apply(Math, newArr.map(function(o){
                    return o.y
                }));
                var minY = Math.min.apply(Math, newArr.map(function (o) {
                    return o.y;
                }));
                maxIndex = newArr.findIndex(x => x.y == maxY);
                minIndex = newArr.findIndex(x => x.y == minY);
                this.addSeries({

                    type: 'flags',
                    data: [{
                    x: newArr[maxIndex].x,
                    y: newArr[maxIndex].y,
                    title: 'Max:' + newArr[maxIndex].y,
                    }, {
                    x: newArr[minIndex].x,
                    y: newArr[minIndex].y,
                    title: 'Min: ' + newArr[minIndex].y,
                    }],

                });
            }
        }
    }
},
title: {
    text: 'Steps by Day'
},
xAxis: {
    type: 'datetime',
    tickInterval: 3600000
},
yAxis: {
    title: {
        text: 'Steps'
    },
},
series: [{
    name: 'Steps',
    data: [[1560297675000, 4.0], [1560300046000, 4.0], [1560302158000, 1.0], [1560302865000, 1.0], [1560303544000, 3.0], [1560305303000, 11.0], [1560305640000, 10.0], [1560306856000, 17.0], [1560307167000, 10.0], [1560308973000, 24.0], [1560309641000, 12.0], [1560309941000, 22.0], [1560310243000, 6.0], [1560310886000, 5.0], [1560312466000, 19.0], [1560313206000, 155.0], [1560314359000, 26.0], [1560316400000, 343.0], [1560318218000, 64.0], [1560319682000, 353.0], [1560325074000, 96.0], [1560326743000, 1037.0]]

}]});

标签： javascripthighcharts

解决方案

您只需要添加一个flag系列：

chart: {
    type: 'spline',
    events: {
        load: function() {
            var series = this.series[0],
                yData = series.yData,
                min = Math.min(...yData),
                max = Math.max(...yData),
                x1 = series.points[yData.indexOf(min)].x,
                x2 = series.points[yData.indexOf(max)].x;

            this.addSeries({
                type: 'flags',
                data: [{
                    x: x1,
                    y: min,
                    title: 'Min: ' + min
                }, {
                    x: x2,
                    y: max,
                    title: 'Max:' + max
                }]
            });
        }
    }
}

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

推荐阅读