在散点图中添加新点
adding new points in a scatter plot
我想以异步方式向散点图添加新点。为此,散点图"addpoint"中有一个api,可以在不刷新散点图的情况下将新发送的数据添加到图表中。这里使用的代码是
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
$(document).ready(function(){
$('#container').highcharts({
chart: {
type: 'scatter',
zoomType: 'xy'
},
title: {
text: 'Height Versus Weight of 507 Individuals by Gender'
},
subtitle: {
text: 'Source: Heinz 2003'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Weight (kg)'
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 100,
y: 70,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
]
}, {
name: 'Male',
color: 'rgba(119, 152, 191, .5)',
data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
]
}]
});
function requestData() {
var chart = $('#container').highcharts();
var points = [
{
x: Math.random() * 100,
y:Math.random() * 80
}
]
var series = chart.series[0];
var data;
chart.series[1].addPoint([Math.random() * 100,Math.random() * 80]);
// call it again after one second
setTimeout(requestData, 1000);
}
requestData();
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
小提琴在这里:http://jsfiddle.net/anirbankundu/T8GT3/1/
有人能告诉我是否有任何可能的方法来添加一组点,而不是一步一步地添加每个点。我每次通话将获得大约1000个积分,积分总数可以超过100K
谢谢,Anirban
使用chart.series[1].data
获取当前序列数据,然后使用chart.series[1].setData
更新其数据。
function requestData() {
var chart = $('#container').highcharts(),
serie = chart.series[1];
// get serie data
var data = serie.data;
// append points to data
for (var i = 0; i < 1000; i++) {
data.push([
Math.random() * 100,
Math.random() * 80
]);
}
// update serie data
serie.setData(data);
}
您可以在此处看到它在工作。
更新-将点附加到当前数据
function requestData() {
var chart = $('#container').highcharts();
// append points to data
for (var i = 0; i < 1000; i++) {
chart.series[1].addPoint([
Math.random() * 100,
Math.random() * 80
], false);
}
chart.redraw();
}
演示
相关文章:
- d3.js:如何为图上的散点添加标签
- 将新对象添加到本地存储
- 在Knockout中将新项添加到对象数组
- 为新对象添加函数,将对象添加到数组中.理解困难'这'关键字
- 向Graph中的所有d3.js数据点添加唯一链接
- 如何将新的
- 添加到
- 使用JavaScript单击
- 添加到
- 将新行添加到localStorage变量中
- 从HTML表单中获取计算得到的JavaScript数据,并将其作为新元素添加到相同的表单操作中以使用PHP保存
- 当上一行/当前行被填充时,将新行添加到HTML表中
- 将路点添加到谷歌距离矩阵中以确定里程
- Regex用于在特定条件下为新句子添加空格或句号
- 谷歌地图多边形 - 添加新点后重新绘制
- D3 js 更新图只是在顶部添加新点
- 在散点图中添加新点
- 为某些特定类别的新系列添加点
- 如果在onFrame中添加了新点,Path.scale将被忽略
- 添加新点时移动图表
- 在点击图像更改后为新图像添加超链接
- 在KineticJS中点击添加一个新点到多边形
- Regex JS.为每个点添加新行,但只能在引号之外