Question

使用RickShaw javascript图形库（https://github.com/shutterstock/rickshaw），我有许多数据系列和一个单选按钮列表，每个数据系列对应一个。

var graphSeries1 = [
    [{
        data: [{ x: 1, y: 110 }, { x: 2, y: 220 }, { x: 3, y: 330 }, { x: 4, y: 440 }, { x: 5, y: 550 }],
        color: palette.color()
    }],
    [{
        data: [{ x: 1, y: 5 }, { x: 2, y: 7 }, { x: 3, y: 18 }, { x: 4, y: 20 }, { x: 5, y: 30 }],
        color: palette.color()
    }],
    [{
        data: [{ x: 1, y: 105 }, { x: 2, y: 210 }, { x: 3, y: 310 }, { x: 4, y: 405 }, { x: 5, y: 515 }],
        color: palette.color()
    }],
    [{
        data: [{ x: 1, y: 5 }, { x: 2, y: 13 }, { x: 3, y: 12 }, { x: 4, y: 20 }, { x: 5, y: 20 }],
        color: palette.color()
    }],
    [{
        data: [{ x: 1, y: 100 }, { x: 2, y: 200 }, { x: 3, y: 300 }, { x: 4, y: 400 }, { x: 5, y: 500 }],
        color: palette.color()
    }]
];

单选按钮，允许用户更改显示的数据：

<div class="chart_container">
    <div id="y_axisDailtStats"></div>
    <div id="chartDailyStats"></div>
    <form class="row">
        <div class="input-field col s4">
            <input name="DailyStatTimeframe" type="radio" id="DailyStatTimeframe1" value="0" />
            <label for="DailyStatTimeframe1">Previous Day</label>
        </div>
        <div class="input-field col s4">
            <input name="DailyStatTimeframe" type="radio" id="DailyStatTimeframe7" value="1" checked />
            <label for="DailyStatTimeframe7">Last 7 Days</label>
        </div>
        <div class="input-field col s4">
            <input name="DailyStatTimeframe" type="radio" id="DailyStatTimeframe30" value="2" />
            <label for="DailyStatTimeframe30">Last 30 Days</label>
        </div>
        <div class="input-field col s4">
            <input name="DailyStatTimeframe" type="radio" id="DailyStatTimeframe91" value="3" />
            <label for="DailyStatTimeframe91">Quarter to date</label>
        </div>
        <div class="input-field col s4">
            <input name="DailyStatTimeframe" type="radio" id="DailyStatTimeframe365" value="4" />
            <label for="DailyStatTimeframe365">Year to day</label>
        </div>
    </form>
</div>

我在图表上显示初始数据集，并在选择相应的单选按钮时尝试更新要显示的图表和备用数据系列。

我的解决方案有效，但看起来很笨重且手动。我确定我错过了更优雅/官方的方式来更改显示的数据系列。

$("input[name=DailyStatTimeframe]").change(function (e) {
    // Remove existing graph from DOM...
    var myNode = document.getElementById("chartDailyStats");
    while (myNode.firstChild) {
        myNode.removeChild(myNode.firstChild);
    }

    // Create new graph object...
    graph1 = new Rickshaw.Graph({
        element: document.querySelector("#chartDailyStats"),
        renderer: 'bar',
        height: 360,
        unstack: true,
        series: graphSeries1[e.target.value]
    });
    graph1.render();
});

有没有人知道更好的方法：https://jsfiddle.net/techwareone/ftwcjjbo/

Answer 1

您可以更新绑定到系列的对象。您必须稍微更改一下代码，如此

var data = [];
data.push(graphSeries1[1][0]);
var graph1 = new Rickshaw.Graph({
    element: document.querySelector("#chartDailyStats"),
    renderer: 'bar',
    height: 360,
    unstack: true,
    series: data
});
...

和

$("input[name=DailyStatTimeframe]").change(function (e) {
    data[0] = graphSeries1[e.target.value][0];
    graph1.update();
});

小提琴 - https://jsfiddle.net/96L9p5kp/

在RickShaw图上更改数据源/序列

1 个答案: