Javascript 向人力车图动态添加数据点
所以我正在使用图形库,我想知道如何在图形中动态添加点 我有一个图形实例化如下:Javascript 向人力车图动态添加数据点,javascript,coffeescript,socket.io,rickshaw,Javascript,Coffeescript,Socket.io,Rickshaw,所以我正在使用图形库,我想知道如何在图形中动态添加点 我有一个图形实例化如下: @seriesData = [ [], [], [] ] random = new Rickshaw.Fixtures.RandomData(150) for (var i = 0; i < 50; i++) { random.addData(self.seriesData) } @graph = n
@seriesData = [ [], [], [] ]
random = new Rickshaw.Fixtures.RandomData(150)
for (var i = 0; i < 50; i++) {
random.addData(self.seriesData)
}
@graph = new Rickshaw.Graph(
element: document.getElementById("chart")
width: 550
height: 300
renderer: 'area'
series: [
{
color: "#c05020"
data: self.seriesData[0]
name: 'One'
}, {
color: "#30c020"
data: self.seriesData[1]
name: 'Two'
}, {
color: "#2791d7"
data: self.seriesData[2]
name: 'Three'
}
]
)
@graph.render()
hoverDetail = new Rickshaw.Graph.HoverDetail(
graph: self.graph
)
legend = new Rickshaw.Graph.Legend(
graph: self.graph
element: document.getElementById('legend')
)
shelving = new Rickshaw.Graph.Behavior.Series.Toggle(
graph: self.graph
legend: legend
)
axes = new Rickshaw.Graph.Axis.Time(
graph: self.graph
)
axes.render()
app.on('data',
(one, two, three) =>
// Dynamically add data points to graph
)
我想知道如何将这三个点添加到图表中。我找不到这个库的好文档。我知道它是建立在d3.js
之上的,但我不确定如何将这些方法合并到我的图中
任何帮助都将不胜感激 我设想两种情况可以解决您的问题:
- 使用
- 利用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();
});