0

我正在尝试使用 highcharts 创建自定义选择器。根据点击右上角的按钮，我需要调用输出不同数据集的不同 php 文件。例如，以下脚本仅读取一个文件并根据一个文件数据进行放大/缩小。我有 6 个不同的文件，1）一天 5 分钟的数据 2）一个月的每小时数据，3）3 个月的每日数据 4）6 个月的每周数据等。基于单击左上角的按钮我需要发出这样的事情：

我正在尝试创建自己的按钮作为这个 jsfiddle 但在每个按钮中我需要调用另一个外部文件来绘制我的图表：http: //jsfiddle.net/YQnJM/4/

我尝试过这样的事情：

    (function() {

    var genOptions = function(data) {
        return {
            chart : {
                renderTo : 'container'
            },
            rangeSelector : {
                enabled:false
            },
            series : data
        };
    }
$.getJSON('db.php', function(data) {  
        var options = genOptions(data);
        var chart = new Highcharts.StockChart(options);
        normalState = new Object();
        normalState.stroke_width = null;
        normalState.stroke = null;
        normalState.fill = null;
        normalState.padding = null;
        normalState.style = hash('text-decoration', 'underline');

        hoverState = new Object();
        hoverState = normalState;


        pressedState = new Object();
        pressedState = normalState;
        chart_1DButton = chart.renderer.button('1D', 52, 10, function() {
        var date = Date.now();
        var date2 = new Date();
        date2.setHours(0);
        date2.setMinutes(0);
        date2.setSeconds(0);
        date2.setMilliseconds(0);
        chart.xAxis[0].setExtremes(date2, date, true);
                $.ajaxSetup({ cache: false });
                $.getJSON('db_cpu_1_day.php', function(data1) {
                options.series[0].setData(data1);

            });
        unselectButtons();
        chart_1DButton.setState(2);
        }, normalState, hoverState, pressedState);

        chart_1DButton.add();
function unselectButtons() {
            chart_1DButton.setState(0);
}
});
});
4

2 回答 2

2

在setExtremes中，您可以检查代码选择了哪个按钮：

xAxis: {
    events: {
        setExtremes: function(e) {
            console.log(this);
            if(typeof(e.rangeSelectorButton)!== 'undefined')
            {
              alert('count: '+e.rangeSelectorButton.count + 'text: ' +e.rangeSelectorButton.text + ' type:' + e.rangeSelectorButton.type);
            }
        }
    }
}

您可以通过以下方式呈现自己的按钮：

normalState = new Object();
        normalState.stroke_width = null;
        normalState.stroke = null;
        normalState.fill = null;
        normalState.padding = null;
        //normalState.r = null;
        normalState.style = hash('text-decoration', 'underline');

        hoverState = new Object();
        hoverState = normalState;


        pressedState = new Object();
        pressedState = normalState;

chart_1MButton = chart.renderer.button('1M', 96, 10, function() {
        chart.xAxis[0].setExtremes(1344527940000, 1346342400000, true);
        unselectButtons();
        chart_1MButton.setState(2);
    }, normalState, hoverState, pressedState);

    chart_1MButton.add();

 function unselectButtons() {
            chart_1MButton.setState(0);
}
于 2013-08-12T10:54:42.450 回答
0

您可以执行以下操作：

var urls = {
    '1m': 'url1',
    '3m': 'url2',
    '6m': 'url3',
    'YTD': 'url4',
    '1y': 'url5',
    'All': 'url6'
};

$('.highcharts-button').on('click', function() {
    var selected = $(this).find('tspan').text()
    $.getJSON(urls[selected], function(json) {
        // set new data
    });
});

这样，您将根据所选按钮获取 url。

演示

于 2013-08-10T03:24:36.850 回答