高图表:显示两条线而不是一条线
High Charts : Two lines showing instead of one
我正在使用高图表.js
问题是在创建图表时,它向我显示两条线而不是一。
它应该只显示一行,因为它在 2 个值之间绘制图形它们是(时间戳和值)。
您能否检查一下为什么它向我显示两行而不是一行,以及我该如何解决此问题:
(只需将代码复制并粘贴到文件中,它应该可以工作)。
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body style="background:#212224;">
<div id="container" style="max-width: 1666px; margin: 0 auto"></div>
<script type="text/javascript">
$.getJSON('https://dl.dropboxusercontent.com/u/76618626/data4.json', function (data) {
console.log("data size is : ");
console.log(data);
var data3 = [];
$.each(data.data,function(i,d){
console.log(new Date(d.timestamp).getTime(), d.value);
data3.push([new Date(d.timestamp).getTime(),d.value]);
});
console.log("Data 3 is :");
console.log(data3);
var data4 = [];
Highcharts.each(data3, function(p, i) {
if (typeof p[0] !== 'number' || typeof p[1] !== 'number') {
console.log('Invalid data is :')
console.log(p);
} else {
data4.push(p);
}
});
$('#container').highcharts({
chart: {
backgroundColor: '#000000',
},
title: {
text: 'Test Graph',
style: {
color: '#FFFFFF',
fontWeight: 'bold'
}
},
xAxis: {
type: 'datetime',
title: {
text: 'Time Stamp'
},
gridLineColor: 'grey',
gridLineWidth: 1,
lineWidth:1
},
yAxis: {
title: {
text: 'Value'
},
gridLineColor: 'grey',
gridLineWidth: 1,
lineWidth:1
},
legend: {
enabled: true
},
exporting: false,
plotOptions: {
line: {
lineColor: 'red',
fillOpacity: 1,
lineWidth: 2,
states: {
hover: {
lineWidth: 2
}
},
threshold: null,
marker: {
fillColor: '#e57255'
}
},
},
series: [{
type: 'line',
name: 'test',
data: data4
}]
});
});
</script>
</body>
</html>
我用jsFiddle重写了你的代码。它实际上是一个折线图。
在 console.log(new Date(d.timestamp).toString(), d.value);
查看打印输出。
数据的时间戳从 Tue Jul 05 2016 03:00:00
开始,增加到 Thu Jul 07 2016 03:00:00
,然后从 Jul 05 2016 03:00:00
重新开始。
因此,这就是为什么您的图表看起来像一个双线图。该行的底部正在链接回顶行。
只需更新您的数据 JSON,您就会很好。
已编辑:
更新我的小提琴以使用 .sort()
排列时间戳。
相关文章:
- 当我的条件为true时,显示一条弹出消息
- 加载页面每10秒显示一条不同的消息
- 当用户单击保存按钮时,标签会显示一条消息
- 仅显示一条通用消息,而不是每个输入显示一条
- 如果用户的浏览器早于以下版本,则显示一条消息:IE 10、Firefox 39、Chrome 39、Opera 8
- 如何设置计时器以显示警报消息并将该警报消息与另一条警报消息重叠
- jQuery image丢弃无效的图像类型,并显示一条无效的消息而不是警告框
- 剑道网格在删除后仍显示最后一条记录
- 角度:当没有结果时显示一条消息 ng-重复角度 ?(具体情况)
- Javascript重定向然后显示一条消息
- 如果未选中复选框,则会显示一条消息
- 如何在表单加载时显示第一条消息,并在 1 分钟后显示下一条消息
- cs.js - 同时仅显示一条线(在多折线图中)
- 在jquery flot图表中,只突出显示一条特定的网格线
- Joomla网站-如果输入的用户的屏幕分辨率很小,则显示一条消息
- 当我的网站打开时,显示一条弹出消息
- 每当出现JavaScript错误时,都会显示一条突出的错误消息(用于开发)
- 我需要在表单提交后显示一条包含变量(表单中的答案)的消息
- ng按钮错误不工作,只显示一条消息angularjs
- 如果在输入框中输入了特定的值,则使用javascript显示一条消息