Question

首先，我在这里了解同步表示例：https://www.highcharts.com/demo/synchronized-charts

这很好，但是在我的表格中，所有图表的Y轴都是相同的，唯一的问题是每隔几秒钟我会向每个图形动态添加一个点，因此我正在寻找一种具有相同最小值的方法和所有图表的最大值（便于比较）。

我迷上了afterSetExtremes（）https://api.highcharts.com/highcharts/yAxis.events.afterSetExtremes
然后计算所有分钟的最小值和所有最大值的最大值（来自所有图表），然后我将其强制为所有图表的新最小值和最大值。

问题在于，一旦我使用setExtremes： https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
Highcharts将停止计算新的最小值和最大值，这意味着，如果我所有图表中的数据开始缩小，则最大值将永远不会被重新计算，因此图形看起来有点不好阅读（假设最大值为10k，现在所有图表中的数据都在1k左右。

我对如何解决此问题有一个想法，方法是从highcharts中读取页面上所有图表的dataMin和dataMax道具，然后每隔X秒由我自己计算最小值和最大值，我的问题是highcharts有一些从dataMin和dataMax计算最大值和最小值的有趣方法，但我没有找到它的定义位置或如何使用该函数。

例如，如果在highcharts中，dataMax为16442，那么我认为最大值为17500，我不确定highcharts在此处执行的确切逻辑，但我想保持相同的行为。

tl;博士
1）同步不同图表（但单位相同）的最小和最大值（Y轴）的最佳方法是什么？
2）如果我的解决方案是最好的方法，那么如何使用dataMax逻辑中的highcharts内部setMax？

谢谢！

Answer 1

似乎您在错误的位置使用了setExtremes。请在下面查看我的方法，每次添加点时，图表的yAxis min和max相同：

function synchronizeCharts() {
    var charts = Highcharts.charts,
        min, 
        max;

    Highcharts.each(charts, function(chart) {
        min = min ? Math.min(min, chart.yAxis[0].min) : chart.yAxis[0].min;
        max = max ? Math.max(max, chart.yAxis[0].max) : chart.yAxis[0].max;
    });

    Highcharts.each(charts, function(chart){
        if (chart.yAxis[0].min !== min || chart.yAxis[0].max !== max) {
            chart.yAxis[0].setExtremes(min, max);
        }
    });
}

实时演示：http://jsfiddle.net/BlackLabel/t81Lp20k/

API：https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

如果您仍然需要了解Highcharts如何计算极端值，可以查看源代码：https://code.highcharts.com/highcharts.src.js

在许多高图表中实时同步最大最小值

1 个答案: