动态更改Highstock范围 [英] Change range in Highstock dynamically

问题描述

我想动态更改图表中的范围.如果我从一个较大的价值变成一个较小的价值，那么一切都会很好.但是，如果我想再次做大，什么也没发生.

I want to change the range in a chart dynamically. If I go from a big value to a smaller, everything works fine. But if I want to go to the bigger again, nothing happens.

您可以在这里尝试: http://jsfiddle.net/Charissima/wkBwW/15/

点击按钮范围50"和后缀范围20". 然后再次范围50".您可以看到颜色在变化，但范围没有变化.

Click the button 'Range 50' and afterwords 'Range 20'. Then 'Range 50' again. You can see the color changing but not the range.

我尽力弄清楚如何解决此问题，但没有成功.我希望有人能帮助我.

I tried hard to figure out how to fix this problem, but without success. I hope, somebody can help me.

<div id="container" style="height: 400px; min-width: 600px"></div>

<script src="http://code.highcharts.com/stock/highstock.js"></script>

<button id="button_20">Range 20</button>
<button id="button_50">Range 50</button>

$(function() {
$('#container').highcharts({  

    chart: {
    },

    rangeSelector: {
        enabled: false          
    },

    exporting: {
        enabled: false
    },

    title : {
        text : 'Ranges'
    },

    navigator: {
        enabled: true,
    },

    xAxis: {
        lineColor: '#ffcc00'
    },

    series : [{
        name : 'Random data',
        data : (function() {
            // generate an array of random data
            var data = [], i;
            for( i = 1; i <= 100; i++) {
                data.push([
                    i,
                    Math.round(Math.random() * 100)
                ]);
            }
            return data;
        })()
    }]

});

// the button action
$('#button_20').click(function() {
    var chart = $('#container').highcharts();
    chart.xAxis[0].update({
        lineColor: '#00ff00',           
        range: 20
    });     
});

$('#button_50').click(function() {
    var chart = $('#container').highcharts();
    chart.xAxis[0].update({
        lineColor: '#E22636',           
        range: 50
    });     
  });        
});

推荐答案

您是否尝试过使用setExtremes() http://api.highcharts.com/highstock#xAxis.events.setExtremes ，它可以定义范围.

Have you tried to use setExtremes() http://api.highcharts.com/highstock#xAxis.events.setExtremes which allow to define range.

示例: http://jsfiddle.net/wkBwW/16/

这篇关于动态更改Highstock范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！