0

ハイチャートでカスタム セレクターを作成しようとしています。右上のどのボタンがクリックされたかに基づいて、異なるデータ セットを出力する別の php ファイルを呼び出す必要があります。たとえば、次のスクリプトは 1 つのファイルのみを読み取り、1 つのファイル データに基づいて拡大/縮小します。私は 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 に答える