How do I dynamically update the range inside a Gauge (HighCharts)?

问题

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?

回答1:

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);

来源：https://stackoverflow.com/questions/19742479/how-do-i-dynamically-update-the-range-inside-a-gauge-highcharts

标签

javascript

Highcharts