gpt4 book ai didi

javascript - Highcharts.js 看不到图表线

转载 作者:行者123 更新时间:2023-11-27 22:51:46 26 4
gpt4 key购买 nike

我正在本地主机上使用 highcharts.js 制作折线图。

我尝试过实现超过20,000条记录,并且运行顺利就像一个魅力。

但是我有一个 json 文件,其中包含 11,000 条记录,但由于某些原因未知原因,当我运行它时,它没有显示图形线。

如果我开的支票显示记录少于三千条,那么我看到那条线了。

只需将代码复制粘贴到 html 文件中即可。

<!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>
<button id="button">Destroy the chart</button>
<button id="create">create the chart</button>


<script type="text/javascript">

$('#button').click(function () {
$('#container').highcharts().destroy();
});

$('#create').click(function (){
$.getJSON('https://dl.dropboxusercontent.com/u/76618626/data2.json', function (data) {
console.log("data size is : ");
console.log(data.data.length);

var data3 = [];

//you can comment this loop and uncomment the loop below for working code.
$.each(data.data,function(i,d){
data3.push([new Date(d.timestamp).getTime(),d.value])
});

//below is commented code which works for 3000 records.

//$.each(data.data,function(i,d){
//if(i<3000){
// data3.push([new Date(d.timestamp).getTime(),d.value])
// }
//});



console.log(data3);

$('#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: data3
}]
});
});
});
</script>
</body>
</html>

最佳答案

确保您的所有数据格式正确,目前存在数据格式不正确的情况。您可以使用如下方式执行快速检查:

$.each(data.data,function(i,d){
// Return if value is not a number
if (isNaN(parseInt(d.value))) return;
data3.push([new Date(d.timestamp).getTime(),d.value])
});

Updated Fiddle

关于javascript - Highcharts.js 看不到图表线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37990622/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com