如何动态更新Gauge（HighCharts）内的范围？ [英] How do I dynamically update the range inside a Gauge (HighCharts)?

问题描述

问题1

我想更改量表内的范围，即当前它被硬编码为0-200。但是，如果我的价值超过200，如300，那么它应该自动将其范围改为0-400。我怎样才能做到这一点？

目前它是 yAxis：{min：0，max：100} 。是否有像％ yAxis：{min：0％，max：100％}

问题2

我想设置数据点的限制，以便在样条曲线每分钟左右更新一次。我如何在Highcharts中做到这一点？我遵循此链接。例如。在图表中最多只能渲染20个点

我试过这个，但它一直在添加点。

  var series = chart.series [0]，
 shift = series.data.length> 20; //如果该系列长于20 
，则转换//但是这会继续添加点。我想将它限制为20. 
 
 //添加点
 chart.series [0] .addPoint（point，true，shift）; 
  

如何添加限额？

解决方案

问题1：
最小/最大值需要是数字，而不是百分比值。如果你想动态修改范围，你可以使用 update 函数，在轴上调用。

请参阅示例： http://jsfiddle.net/jgRTz/
http://api.highcharts.com/highcharts#Axis.update（）

问题2：
理解你应该设定限制（加点而不是移动图表），但是在这样做之后：

http://jsfiddle.net/qzZxh/

  setInterval（function（）{
 var x =（new Date（））。getTime（），//当前时间$ b $ = Math.random （）; 
 
 if（series.data.length> MAXPOINTS）
 series.addPoint（[x，y]，true，true）; 
 else 
series.addPoint（[x，y]，true，false）; 
 
}，1000）; 
  

Question1

I want to change the range inside the gauge, ie currently it is hardcoded as 0-200. But what if my value goes above 200, something like 300, then it should automatically change its range to something like 0-400. How can I achieve this?

Currently it is yAxis: {min: 0, max: 100}. Is there somthing like % yAxis: {min: 0%, max: 100%}

Question2

I want to set the limit of data points to be plotted on the Spline updating every min or so. How do I do that in Highcharts? I followed this link. For eg. There should be at max only 20 points rendered inside the graph

I tried this, but it keeps on adding the points.

var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is longer than 20
// But this keeps on adding the points. i want to limit it to 20.

// add the point
chart.series[0].addPoint(point, true, shift);

how do I add a limit?

解决方案

Question 1: Min/max values needs to be number, not percent value. In case when you would like to modify range, dynamically, you can use update function, called on axis.

See example: http://jsfiddle.net/jgRTz/ http://api.highcharts.com/highcharts#Axis.update()

Question 2: In understand that you woudl liek to set limit (adding point not shift chart), but after do it like here:

http://jsfiddle.net/qzZxh/

 setInterval(function() {
                        var x = (new Date()).getTime(), // current time
                            y = Math.random();

                        if(series.data.length > MAXPOINTS)
                            series.addPoint([x, y], true, true);
                        else
                            series.addPoint([x, y], true, false);

                    }, 1000);

这篇关于如何动态更新Gauge（HighCharts）内的范围？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！