高图:添加点而不连接系列
Highcharts: Add point without connecting series
All, 我试图允许用户单击两个数据点之间的高图表并画一条线。 生成的行将计算渲染行上方的最大值-最小值。
我正在尝试使用此示例(http://jsfiddle.net/2MdEN/1/)。
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'scatter',
margin: [70, 50, 60, 80],
events: {
click: function(e) {
// find the clicked values and the series
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
series = this.series[0];
// Add it
series.addPoint([x, y]);
}
}
},
title: {
text: 'User supplied data'
},
subtitle: {
text: 'Click the plot area to add a point. Click a point to remove it.'
},
xAxis: {
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60
},
yAxis: {
title: {
text: 'Value'
},
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
series: {
lineWidth: 1,
point: {
events: {
'click': function() {
if (this.series.data.length > 1) this.remove();
}
}
}
}
},
series: [{
data: [[20, 20], [80, 80], null, [60, 40], [85, 60]]
}]
});
});
});
问题是将系列中的最后一个数据点连接到新添加的点。 我希望将点从序列中分离出来,以允许在生成的图表上方绘制线条。
有什么办法可以做到这一点吗?
谢谢
您可以在图表配置中包含第二个空序列,并更改要向其添加点的序列:
events: {
click: function(e) {
// find the clicked values and the series
var x = e.xAxis[0].value,
y = e.yAxis[0].value,
series = this.series[1]; <------------
// Add it
series.addPoint([x, y]);
}
}
然后,如果您不希望用户能够从原始数据中删除点,也可以将点单击事件移动到第二个系列中:
series: [{
data: [
[20, 20],
[80, 80], null, [60, 40],
[85, 60]
]
}, {
id: 'dummy',
color: 'rgba(204,0,0,0.9)',
point: {
events: {
'click': function() {
this.remove();
}
}
}
}]
更新的示例:
- http://jsfiddle.net/2MdEN/107/
我使用了以下内容
$(function () {
$('#container').highcharts({
chart: {
type: 'scatter',
margin: [70, 50, 60, 80],
events: {
click: function (e) {
var c = this.series[0].chart;
var s = this.series.length;
var x = e.xAxis[0].value;
var y = e.yAxis[0].value;
if(s == 1) {
c.addSeries('newSeries' + new Date());
c.series[1].addPoint([x, y]);
}else{
if(this.series[this.series.length-1].data.length%2 == 1) {
c.series[this.series.length-1].addPoint([x, y]);
}else{
c.addSeries('newSeries' + new Date());
c.series[this.series.length-1].addPoint([x, y]);
}
}
}
}
},
title: {
text: 'User supplied data!!!!'
},
subtitle: {
text: 'Click the plot area to add a point. Click a point to remove it.'
},
xAxis: {
gridLineWidth: 1,
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60
},
yAxis: {
title: {
text: 'Value'
},
minPadding: 0.2,
maxPadding: 0.2,
maxZoom: 60,
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
plotOptions: {
series: {
lineWidth: 1,
point: {
events: {
'click': function () {
if (this.series.data.length > 1) {
this.remove();
}
}
}
}
}
},
series: [{
data: [[20, 20], [80, 80]]
}]
});
});
相关文章:
- Rails-JQueryUIAutcomplete和AJAX不工作,可以't连接到数据库
- TypeError:_this.store.getState在使用来自Redux的连接时不是函数
- Highcharts colorsByPoint与系列中的线性渐变一起使用时不起作用
- 我可以在不连接按钮的情况下以角度方式使用zclip吗
- 不使用Nodejs连接mongodb上的默认端口
- 如何添加两个变量而不使其在javascript中连接
- 访问Highcharts系列的最小/最大值:afterSetExtremes不会激发
- 如果在include文件中使用连接,Jquery ajax调用将不起作用
- Mootools:拒绝设置不安全的标头“;连接”;
- 多个 socket.io 客户端连接不起作用(谷歌浏览器,火狐浏览器)
- ReactD3:在 reactD3Basic 对象中找不到系列属性
- 为什么这个 ng-idle 实现不连接模式和样式
- 浮点不连接
- 在angular中使用$location.path()时,Socket.io不连接
- jQuery Web Socket不连接和不发送
- 当第一个记录为空时,Extjs折线图不绘制系列
- SJCL不连接位数组
- Firebase有时连接,有时不连接(React Native)
- 高图:添加点而不连接系列
- Mongodb和node.js驱动程序不连接聊天rest api