Highcharts 显示图例中每个系列的最大值、最小值和平均值

Question

我有一些图表，最好显示 最小值、最大值 和 平均值 每个系列的值分别。传说中不是"must"，不过这样就好了。另一个解决方案可能是在图表中（在该点）显示最小值、最大值和实际值，这也是一个非常好的解决方案。在不同的图表中，目前系列的数量从 1-4 不等。

实际值（或实际最新值）已经在图例中。

此外，我希望在首次加载和更改缩放比例时更新这些值 "at all times"。更改缩放时应基于选择，因此选择“1 m”时必须显示上个月的值等等。

http://jsfiddle.net/dg4wpg0t/1/

感谢任何帮助:)

最终结果示例（红色文本）：

Highcharts.stockChart('container', {

chart: {
    zoomType: 'x'
},

legend: {
    enabled: true,
    labelFormatter: function() {
        var lastVal = this.yData[this.yData.length - 1];
        return this.name + '<br>' + 'Now: ' + lastVal + ' °C';
        }
},

  series: [{
    name: 'Outside',
    data: [
        [Date.UTC(2016, 01, 01), 0.2],
        [Date.UTC(2016, 01, 06), -1.4],
        [Date.UTC(2016, 01, 11), -2.6],
        [Date.UTC(2016, 01, 16), 11.1],
        [Date.UTC(2016, 01, 21), -11.1],
        [Date.UTC(2016, 01, 26), 3.7],
        [Date.UTC(2016, 02, 01), 4.9],
        [Date.UTC(2016, 02, 06), 8.2],
        [Date.UTC(2016, 02, 11), 0.2],
        [Date.UTC(2016, 02, 16), -1.4],
        [Date.UTC(2016, 02, 21), -2.6],
        [Date.UTC(2016, 02, 26), -5.1],
        [Date.UTC(2016, 03, 01), -8.3],
        [Date.UTC(2016, 03, 06), 3.7],
        [Date.UTC(2016, 03, 11), 4.9],
        [Date.UTC(2016, 03, 16), 5.2],
        [Date.UTC(2016, 03, 21), 0.2],
        [Date.UTC(2016, 03, 26), -1.4],
        [Date.UTC(2016, 04, 01), -2.6],
        [Date.UTC(2016, 04, 06), -5.1],
        [Date.UTC(2016, 04, 11), -8.3],
        [Date.UTC(2016, 04, 16), 11.2],
        [Date.UTC(2016, 04, 21), -11.2],
        [Date.UTC(2016, 04, 26), 5.2]
        ]
    }, {
    name: 'Inside',
    data: [
        [Date.UTC(2016, 01, 01), 17.8],
        [Date.UTC(2016, 01, 06), 27.1],
        [Date.UTC(2016, 01, 11), 17.1],
        [Date.UTC(2016, 01, 16), 21.7],
        [Date.UTC(2016, 01, 21), 25.3],
        [Date.UTC(2016, 01, 26), 24.3],
        [Date.UTC(2016, 02, 01), 22.3],
        [Date.UTC(2016, 02, 06), 24.1],
        [Date.UTC(2016, 02, 11), 19.8],
        [Date.UTC(2016, 02, 16), 20.2],
        [Date.UTC(2016, 02, 21), 26.5],
        [Date.UTC(2016, 02, 26), 21.7],
        [Date.UTC(2016, 03, 01), 25.3],
        [Date.UTC(2016, 03, 06), 24.3],
        [Date.UTC(2016, 03, 11), 22.3],
        [Date.UTC(2016, 03, 16), 24.1],
        [Date.UTC(2016, 03, 21), 19.8],
        [Date.UTC(2016, 03, 26), 20.2],
        [Date.UTC(2016, 04, 01), 24.5],
        [Date.UTC(2016, 04, 06), 21.7],
        [Date.UTC(2016, 04, 11), 27.2],
        [Date.UTC(2016, 04, 16), 17.2],
        [Date.UTC(2016, 04, 21), 22.3],
        [Date.UTC(2016, 04, 26), 24.1]
        ]
    }]

});

Answer 1

您需要在图表开始（加载事件）和 redraw event 时进行计算。您可以禁用数据分组 - 对于您拥有的数据量，数据分组不是必需的 - 禁用它可以简化数据抓取。

过滤可见点
对他们进行统计
替换图例中的文字

函数：

function calculateStatistics() {
      this.series.slice(0, 2).forEach(series => { // take only two first series, the last is for the navigator
        const data = series.data.filter(point => point.isInside).map(point => point.y); // grab only points within the visible range

        // calculate statistics for visible points
        const statistics = [
          data[data.length - 1],
          Math.max.apply(null, data),
          Math.min.apply(null, data),
          (data.reduce((a, b) => a + b, 0) / data.length).toFixed(1)
        ];

        const legendItem = series.legendItem;
        let i = -1;
        // construct the legend string
        const text = legendItem.textStr.replace(/-?\d+\.\d/g, () => statistics[++i]);

        // set the constructed text for the legend
        legendItem.attr({
          text: text
        });
      });
    }

并在事件上设置函数

chart: {
    zoomType: 'x',
    events: {
      load: calculateStatistics,
      redraw: calculateStatistics
    }
},

样式文本可以在 legend.labelFormatter

中完成

实例和输出

http://jsfiddle.net/jfLtodf9/

Highcharts 显示图例中每个系列的最大值、最小值和平均值

Highcharts show max., min., and average for each serie in legend

javascript

charts

highcharts

highstock

实例和输出