Javascript 高位图表显示图例中每个系列的最大值、最小值和平均值

我有一些图表，可以分别显示每个系列的最小值、最大值和平均值。在传说中不是“必须”，但这将是非常好的。另一个解决方案可能是在图表中显示最小值、最大值和实际值（此时），这也是一个非常好的解决方案。目前，在不同的图表中，系列的数量从1到4不等

图例中已存在实际值（或实际的最新值）

此外，我希望在第一次加载和更改缩放时“始终”更新这些值。更改缩放时，应基于选择，因此选择“1 m”时，必须显示上个月的值，依此类推

感谢您的帮助：）

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

Highcharts.stockChart（'container'）{
图表：{
zoomType:'x'
},
图例：{
启用：对，
labelFormatter:function（）{
var lastVal=this.yData[this.yData.length-1]；
现在返回this.name+'
'+'Now:'+lastVal+''C'；
}
},
系列：[{
名称：'外部'，
数据：[
[UTC日期（2016年1月1日），0.2]，
[UTC日期（2016年1月6日），-1.4]，
[UTC日期（2016年1月11日），-2.6]，
[UTC日期（2016年1月16日），11.1]，
[UTC日期（2016年1月21日），-11.1]，
[UTC日期（2016年1月26日），3.7]，
[UTC日期（2016年2月1日），4.9]，
[UTC日期（2016年2月6日），8.2]，
[UTC日期（2016年2月11日），0.2]，
[UTC日期（2016年2月16日），-1.4]，
[UTC日期（2016年2月21日），-2.6]，
[UTC日期（2016年2月26日），-5.1]，
[UTC日期（2016年3月1日），-8.3]，
[UTC日期（2016年3月6日），3.7]，
[UTC日期（2016年3月11日），4.9]，
[UTC日期（2016年3月16日），5.2]，
[UTC日期（2016年3月21日），0.2]，
[UTC日期（2016年3月26日），-1.4]，
[UTC日期（2016年4月1日），-2.6]，
[UTC日期（2016年4月6日），-5.1]，
[UTC日期（2016年4月11日），-8.3]，
[UTC日期（2016年4月16日），11.2]，
[UTC日期（2016年4月21日），-11.2]，
[UTC日期（2016年4月26日），5.2]
]
}, {
名称：'内部'，
数据：[
[UTC日期（2016年1月1日），17.8]，
[UTC日期（2016年1月6日），27.1]，
[UTC日期（2016年1月11日），17.1]，
[UTC日期（2016年1月16日），21.7]，
[UTC日期（2016年1月21日），25.3]，
[UTC日期（2016年1月26日），24.3]，
[UTC日期（2016年2月1日），22.3]，
[UTC日期（2016年2月6日），24.1]，
[UTC日期（2016年2月11日），19.8]，
[UTC日期（2016年2月16日），20.2]，
[UTC日期（2016年2月21日），26.5]，
[UTC日期（2016年2月26日），21.7]，
[UTC日期（2016年3月1日），25.3]，
[UTC日期（2016年3月6日），24.3]，
[UTC日期（2016年3月11日），22.3]，
[UTC日期（2016年3月16日），24.1]，
[UTC日期（2016年3月21日），19.8]，
[UTC日期（2016年3月26日），20.2]，
[UTC日期（2016年4月1日），24.5]，
[UTC日期（2016年4月6日），21.7]，
[UTC日期（2016年4月11日），27.2]，
[UTC日期（2016年4月16日），17.2]，
[UTC日期（2016年4月21日），22.3]，
[UTC日期（2016年4月26日），24.1]
]
}]
});

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

过滤可见点

为他们做统计

替换图例中的文本

职能：

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
    }
},

可以在中设置文本样式

实例和输出

---

谢谢！最后，我需要进行数据挖掘，实际上，这只是一个简单的图表示例，但现在我们不讨论这个问题。。。还有一个问题，如果在图例中放入一个不带小数的值，该值将冻结且不再更新，可能是因为textStr.replace找不到“.”。。。？有什么好的解决办法吗？：）我还希望将“现在”值（实际值）作为序列的最新值，而不是通过选择进行过滤。另一方面，最小值、最大值和平均值都可以。您需要调整我使用的正则表达式-它不适用于数字的每个表示形式-如果您有奇怪格式的数据，可能最好构建一个全新的字符串，而不是替换现有的字符串。要访问未筛选的数据，请使用series.data-还没有。。我添加了更多的数据只是为了测试，当我放大和更改选择值时，它们不会像应该的那样更新。您可以构建新字符串，而不是替换现有字符串。非常感谢你的帮助！现在，我正在尝试根据您为我创建的函数在图表中添加最大值和最小值的数据标签：）我尝试了一些手动输入的值（在event AfterExtremes），因此这基本上是我最终想要的，但在重新绘制和加载时会像图例一样进行更新。也许图表更新不是一个好办法。

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