gpt4 book ai didi

javascript - Highcharts 图表不可见

转载 作者:行者123 更新时间:2023-12-03 06:37:37 24 4
gpt4 key购买 nike

我正在处理图表,但它不可见。

在我的代码中有两行,一行有效,另一行无效。(我已经评论过)

//this line does not work
//data3.push([new Date(d.timestamp).getTime(),data.data.risk);

//this line works
data3.push([new Date(d.timestamp).getTime(),data.data.threshold[0].amber_threshold]);

我的目标:我想运行不起作用的生产线。

我认为我没有正确传递数据。我想传递名为 risk 的数组来制作图表。

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

<!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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

</head>

<body style="background:#212224;">

<div id="container2" style="max-width: 1666px; margin: 0 auto"></div>

<script type="text/javascript">

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

var minX = _.min(data.data.risk, function (d) {
return new Date(d.timestamp).getTime();
});
var maxX = _.max(data.data.risk, function (d) {
return new Date(d.timestamp).getTime();
});


var data3 = [];

$.each(data.data.risk, function (i, d) {

//this line does not work
//data3.push([new Date(d.timestamp).getTime(),data.data.risk);

//this line works
data3.push([new Date(d.timestamp).getTime(),data.data.threshold[0].amber_threshold]);
});




$('#container2').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: [{
name: 'Graph',
data: data3
}]
});
});

</script>
</body>
</html>

最佳答案

我假设您想要来自风险。您已经迭代了这一行中 risk 的每一项:$.each(data.data.risk, function (i, d) {

要获取risk的值,请使用以下行:data3.push([new Date(d.timestamp).getTime(),d.value]);

您可以查看下面的示例。

    <!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>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

</head>

<body style="background:#212224;">

<div id="container2" style="max-width: 1666px; margin: 0 auto"></div>

<script type="text/javascript">

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

var minX = _.min(data.data.risk, function (d) {
return new Date(d.timestamp).getTime();
});
var maxX = _.max(data.data.risk, function (d) {
return new Date(d.timestamp).getTime();
});


var data3 = [];

$.each(data.data.risk, function (i, d) {

//this line does not works
data3.push([new Date(d.timestamp).getTime(),d.value]);

//this line works
// data3.push([new Date(d.timestamp).getTime(),data.data.threshold[0].amber_threshold]);
});




$('#container2').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: [{
name: 'Graph',
data: data3
}]
});
});

</script>
</body>
</html>

输出: enter image description here

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

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