Javascript 向空人力车图表添加数据
我正在用人力车绘制不同的数据。但我需要一种在用户单击Javascript 向空人力车图表添加数据,javascript,jquery,charts,rickshaw,Javascript,Jquery,Charts,Rickshaw,我正在用人力车绘制不同的数据。但我需要一种在用户单击#search按钮时更新图表的方法。现在它只是在旧图表的下方创建了一个新图表,这相当混乱 用户进入页面并输入一些详细信息,然后单击按钮以绘制图表。所以理想情况下,我希望从一个没有显示的空图表开始,但我真的不知道如何从图表和轴中删除数据,然后更新它 我可以调用$('#chart svg').remove()在图表和轴上,但看起来很混乱 $('#search').click(function(event){ event.preventDef
#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();
});
没有官方的方法可以做到这一点。但是,您可以利用javascript中的数组是通过引用传递的事实,然后更新图形
看看这个
没有官方的方法可以做到这一点。但是,您可以利用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();
});