Question

这里我要求高级图表有像 1d，1w，1m，3m，6m，All 这样的范围选择器，当我点击任何范围选择器时我必须从服务器获取响应数据这意味着ajax调用onclick范围选择器。我有下面的小提琴文件有我的代码。这有一个问题，比如我正在使用

添加数据

$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {

    if(data != null) {
        chart.addSeries({
            name : 'Energy consumption',
            id   : 'energyConsumption',
            data : data
        },{
            name : 'Outdoor Temperature',
            id   : 'outdoorData',
            data : data
        }
        );       
    }

});

上面的代码工作如果我将数据更改为静态或从JQuery回调响应更改它无法正常工作。我的小提琴文件如下 http://jsfiddle.net/UegzK/4/

请帮我解决这个问题提前谢谢，

Answer 1

两个变化：

reset_all_buttons应该是这样的：

function reset_all_buttons() {
    $.each(chart.rangeSelector.buttons, function(index, value) {
        console.debug("index value is "+index);
        console.debug("value value is : "+ value);
        value.setState(0); 
    });

    series = chart.get('energyConsumption');
    series.remove(); 
    series = chart.get('outdoorData');
    series.remove(); 
}

因为你不想只删除10个系列（来自你的例子）。

addSeries当时只能添加一个系列，您应该为启动系列设置pointStart和pointInterval：

if(data.length > 0) {
    console.log(chart,data);
    chart.addSeries({
        name : 'Energy consumption',
        id   : 'energyConsumption',
        pointStart: Date.UTC(2013, 03, 08,00,00),
        pointInterval: 1 * 3600 * 1000,
        data : [26.5, 23.3, 18.3, 13.9, 9.6,21.5, 25.2,49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6]
    });

    chart.addSeries({
        name : 'Outdoor Temperature',
        id   : 'outdoorData',
        pointStart: Date.UTC(2013, 03, 08,00,00),
        pointInterval: 1 * 3600 * 1000,
        data : [26.5, 23.3, 18.3, 13.9, 9.6,21.5, 25.2]
    });       
}

您的示例：http://jsfiddle.net/UegzK/5/（仅适用于1w，只是为了展示它应该如何）。

Answer 2

而不是你的reset_all_buttons函数，调用chart.rangeSelector.clickButton（index）将应用highstock的默认行为。我有一个用例，我在每日和当日股票价格之间切换。当我切换到3day视图时，我希望具有等距数据点的更精细的盘中价格。在更长距离的视图中，我想要一个带有序数的xAxis：true，因此这些点是基于时间的。这是我的加载事件（打字稿）

chart: {
    events: {
        load: function() {
            var chart: HighchartsChartObject = <HighchartsChartObject>this;
            var replaceSeries = (serieses: HighchartsSeriesOptions[]): void => {
                while(chart.series.length > 0) {
                    chart.series[0].remove(false);
                }
                _.each(serieses, (series: HighchartsSeriesOptions) => {
                    chart.addSeries(series, false);
                });
                chart.redraw();
            }
            var buttons = chart.rangeSelector.buttons;
            buttons[0].on("click", function(e) {
                if (chart.rangeSelector.selected !== 0) {
                    _.each(this.xAxis, (xAxis: any): void => {
                        xAxis.options.ordinal = false;
                        xAxis.options.minRange = undefined;
                    });
                    replaceSeries(chartDataService.buildDataSeries(true));
                }
                chart.rangeSelector.clickButton(0);
            });
            _.each(buttons, (button, index: number): void => {
                if (index !== 0) {
                    button.on("click", function(e) {
                        if (chart.rangeSelector.selected === 0) {
                            _.each(this.xAxis, (xAxis: any): void => {
                                xAxis.options.ordinal = true;
                                xAxis.options.minRange = 1000 * 60 * 60 * 24 * 7; // 1wk for daily data
                            });
                            replaceSeries(chartDataService.buildDataSeries(false));
                        }
                        chart.rangeSelector.clickButton(index);
                    });
                }
            })
        }
    }
}

高图范围选择器的Onclick事件

2 个答案: