1

RickshawJS でさまざまなデータをグラフ化しています。しかし、ユーザーが#searchボタンをクリックしたときにグラフを更新する方法が必要です。現在、古いチャートの下に新しいチャートを作成するだけで、かなり面倒です。

ユーザーはページに入り、いくつかの詳細を入力し、ボタンをクリックしてチャートを作成します。理想的には、表示されていない空のチャートから始めたいのですが、チャートと軸からデータを削除してから更新する方法が本当にわかりません。

$('#chart svg').remove();チャートと軸を呼び出すことはできましたが、面倒です。

$('#search').click(function(event){
    event.preventDefault();

    var data = utils.malletData();
    var graph = new Rickshaw.Graph( {
            element: document.querySelector("#chart"),
            width: 800,
            height: 250,
            series: [ {
                    name: data['name'],
                    color: 'steelblue',
                    data: data['series']
            } ]
    } );
    graph.render();

    var hoverDetail = new Rickshaw.Graph.HoverDetail( {
        graph: graph,
        xFormatter: function(x) {
            var date = new Date(x).getTime();
            return moment(x).format('MMMM Do YYYY, h:mm:ss a');
        },
        yFormatter: function(y) { return Math.floor(y) + " users" }
    } );

    var xAxis = new Rickshaw.Graph.Axis.X( {
        graph: graph,
        orientation: 'bottom',
        element: document.getElementById('x_axis'),
        tickFormat: function(x) { return moment(x).fromNow(); },
        ticks: 7,
        tickSize: 1,
    } );
    xAxis.render();

    var ticksTreatment = 'glow';
    var yAxis = new Rickshaw.Graph.Axis.Y( {
        graph: graph,
        orientation: 'left',
        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
        ticksTreatment: ticksTreatment,
        element: document.getElementById('y_axis'),
    } );
    yAxis.render();
});
4

1 に答える 1

5

正式な方法はありません。ただし、javascript の配列が参照によって渡されるという事実を利用して、グラフを更新することができます。

フィドルでこのデモを見てください

var data = [
        {
            data: [ { x: 0, y: 120 }, { x: 1, y: 890 }, { x: 2, y: 38 }, { x: 3, y: 70 }, { x: 4, y: 32 } ],
            color: "#c05020"
        }, {
            data: [ { x: 0, y: 80 }, { x: 1, y: 200 }, { x: 2, y: 100 }, { x: 3, y: 520 }, { x: 4, y: 133 } ],
            color: "#30c020"
        }
];


var graph = new Rickshaw.Graph( {
    element: document.getElementById("chart"),
    renderer: 'line',
    height: 300,
    width: 800,
    series: data
} );

var y_ticks = new Rickshaw.Graph.Axis.Y( {
    graph: graph,
    orientation: 'left',
    tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
    element: document.getElementById('y_axis'),
} );

graph.render();


$('button#add').click(function() {
    data.push({
            data: [ { x: 0, y: 200 }, { x: 1, y: 390 }, { x: 2, y: 1000 }, { x: 3, y: 200 }, { x: 4, y: 230 } ],
            color: "#6060c0"
    });
    graph.update();
});
于 2013-10-01T21:13:28.780 に答える