javascript - 更改人力车图上的数据源/系列

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

您可以只更新绑定(bind)到系列的对象。你必须稍微改变你的代码，像这样

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();
});

---

fiddle - https://jsfiddle.net/96L9p5kp/