2

人力車で 2 つのグラフをレンダリングしていますが、まったく問題ありません。両方のグラフを操作できるようにしたい単一のスライダーがありますが、現在行っているのは、宣言した最後のグラフを操作することです。

//graph one
var graph_one = new Rickshaw.Graph( {
        element: document.querySelector("#chart_one"),
        height: 150,
        width: 170,
        renderer: 'bar',
        series: data
} );

//slider code
var slider_one = new Rickshaw.Graph.RangeSlider({
    element: document.querySelector('#slider-range'),
    graph: graph_one
});

graph_one.render();

//graph two
var graph_two = new Rickshaw.Graph( {
        element: document.querySelector("#chart_two"),
        renderer: 'line',
        height: 150,
        width: 170,
        series: data
} );

//slider code
var slider_two = new Rickshaw.Graph.RangeSlider({
    element: document.querySelector('#slider-range'),
    graph: graph_two
});

graph_two.render();

1 つのスライダーで 2 つのグラフを操作することはできますか?

4

3 に答える 3

4

これは、rickshaw.js を編集することで実現しました。具体的には、Rickshaw.Graph.RangeSlider を編集して、グラフの配列をグラフ変数として受け入れるようにしました。

Rickshaw.Graph.RangeSlider = function(args) {

    var element = this.element = args.element;
    var graph = this.graph = args.graph;
    //added by bozdoz
    if(graph.constructor === Array){
            $( function() {
                $(element).slider( {
                    range: true,
                    min: graph[0].dataDomain()[0],
                    max: graph[0].dataDomain()[1],
                    values: [ 
                        graph[0].dataDomain()[0],
                        graph[0].dataDomain()[1]
                    ],
                    slide: function( event, ui ) {
                        //on slide, move both graphs
                        for(var i=0; i < graph.length; i++){
                            graph[i].window.xMin = ui.values[0];
                            graph[i].window.xMax = ui.values[1];
                            graph[i].update();

                            // if we're at an extreme, stick there
                            if (graph[i].dataDomain()[0] == ui.values[0]) {
                                graph[i].window.xMin = undefined;
                            }
                            if (graph[i].dataDomain()[1] == ui.values[1]) {
                                graph[i].window.xMax = undefined;
                            }
                        }
                    }
                } );
            } );
            graph[0].onUpdate( function() {

                var values = $(element).slider('option', 'values');

                $(element).slider('option', 'min', graph[0].dataDomain()[0]);
                $(element).slider('option', 'max', graph[0].dataDomain()[1]);

                if (graph[0].window.xMin == undefined) {
                    values[0] = graph[0].dataDomain()[0];
                }
                if (graph[0].window.xMax == undefined) {
                    values[1] = graph[0].dataDomain()[1];
                }

                $(element).slider('option', 'values', values);

            } );
            ...

次に、グラフを宣言するときに、両方のグラフ変数を配列として含めて、スライダー コードを最後のグラフに追加するだけです。

var slider_two = new Rickshaw.Graph.RangeSlider({
    element: document.querySelector('#slider-range'),
    graph: [graph_one, graph_two]
});

私が望んでいた通りに動作します: http://jsfiddle.net/bozdoz/k4NmL/

于 2012-11-16T17:22:46.837 に答える
2

以下は、Rickshaw の最新バージョン用に上記のコードを修正したものです。

Rickshaw.Graph.RangeSlider = Rickshaw.Class.create({

initialize: function(args) {

    var element = this.element = args.element;
    var graph = this.graph = args.graph;
    this.onslide = args.onslide;

    this.build();

    if( graph.constructor === Array ) {
        for( var i=0; i<graph.length; i++ ) {
            graph[i].onUpdate( function() { this.update() }.bind(this) );
        }
    } else {
        graph.onUpdate( function() { this.update() }.bind(this) );
    }
},

build: function() {

    var element = this.element;
    var graph = this.graph;
    var onslide = this.onslide;

    if( graph.constructor === Array ) {
        $( function() {
            $(element).slider( {
                range: true,
                min: graph[0].dataDomain()[0],
                max: graph[0].dataDomain()[1],
                values: [
                    graph[0].dataDomain()[0],
                    graph[0].dataDomain()[1]
                ],
                slide: function( event, ui ) {
                    for( var i=0; i<graph.length; i++) {
                        graph[i].window.xMin = ui.values[0];
                        graph[i].window.xMax = ui.values[1];
                        graph[i].update();

                        // if we're at an extreme, stick there
                        if (graph[i].dataDomain()[0] == ui.values[0]) {
                            graph[i].window.xMin = undefined;
                        }
                        if (graph[i].dataDomain()[1] == ui.values[1]) {
                            graph[i].window.xMax = undefined;
                        }
                    }
                    if( onslide ) {
                        onslide(ui.values[0],ui.values[1]);
                    }
                }
            } );
        } );

        element[0].style.width = graph[0].width + 'px';

    } else {
        $( function() {
            $(element).slider( {
                range: true,
                min: graph.dataDomain()[0],
                max: graph.dataDomain()[1],
                values: [
                    graph.dataDomain()[0],
                    graph.dataDomain()[1]
                ],
                slide: function( event, ui ) {

                    graph.window.xMin = ui.values[0];
                    graph.window.xMax = ui.values[1];
                    graph.update();

                    // if we're at an extreme, stick there
                    if (graph.dataDomain()[0] == ui.values[0]) {
                        graph.window.xMin = undefined;
                    }
                    if (graph.dataDomain()[1] == ui.values[1]) {
                        graph.window.xMax = undefined;
                    }
                    if( onslide ) {
                        onslide(ui.values[0],ui.values[1]);
                    }
                }
            } );
        } );

        element[0].style.width = graph.width + 'px';
    }
},

update: function() {

    var element = this.element;
    var graph = this.graph;

    var values = $(element).slider('option', 'values');

    if( graph.constructor === Array ) {
        graph = graph[0];
    }

    $(element).slider('option', 'min', graph.dataDomain()[0]);
    $(element).slider('option', 'max', graph.dataDomain()[1]);

    if (graph.window.xMin == null) {
        values[0] = graph.dataDomain()[0];
    }
    if (graph.window.xMax == null) {
        values[1] = graph.dataDomain()[1];
    }

    $(element).slider('option', 'values', values);
}
});
于 2013-09-02T22:13:19.413 に答える