gpt4 book ai didi

javascript - HighCharts 和 Javascript 将数据作为数组传递

转载 作者:行者123 更新时间:2023-11-30 09:48:07 26 4
gpt4 key购买 nike

我正在尝试使用 Javascript 将数组作为变量传递到 HighCharts 图中。带有标记的点显示正确,但没有连接点的样条曲线(数据 2,紫色)。我也在同一张图表上尝试过,直接传递一个带有值的数组,这次 HighCharts 正在显示标记和样条线(数据 1,红色)。对于这两个系列,所有线条参数(lineWidth、dashStyle、color)都已设置。我在 IE11 和 Chrome 和 FireFox 上测试了,结果都是一样的。。。下面是完整的代码。如果有人已经遇到过这个问题,或者,更好!,知道如何解决这个问题(用标记显示两组数据并用线连接这些标记),我会非常感兴趣!非常感谢!!

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Chart</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var myData = new Array();
for (n=1;n<=10;n++)
{
myData[n]=Math.floor((Math.random() * 10) + 1);
}
var mySeries = [];
for (var i = 0; i < myData.length; i++){
mySeries.push([i,myData[i]]);
}
$('#container').highcharts({
title: {
text: 'Chart',
x: -20 //center
},
xAxis: {
opposite:true,
title: {text: 'Horizontal Axis'},
showFirstLabel: true,
showLastLabel: true,
min: 0, max: 12,
tickInterval: 1,
startOnTick: true,
endOnTick: true,
},
yAxis: {
title: {text: 'Vertical Axis - inverted'},
reversed: true,
showFirstLabel: true,
showLastLabel: true,
min: 0, max: 12,
tickInterval: 1,
startOnTick: true,
endOnTick: true,
},
tooltip: {
valueSuffix: 'Week'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [
{name:'Data 1',data:[0,1,2,3,4,5,6,7,8,9,10],marker:{symbol:'circle'},lineWidth:1,dashStyle:'Solid',color:'#FF0000'},
{name:'Data 2',data:mySeries ,marker:{symbol:'circle'},lineWidth:1,dashStyle:'Solid',color:'#FF00FF'},
]
});
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 1000px; height: 700px; margin: 0 auto"></div>
</body>
</html>

最佳答案

我相信 Highcharts 无法绘制样条曲线,因为 mySeries 的第一个值是 undefined

对于 myData,您从 n = 1 开始,所以 myData[0] 在之后仍然是 undefined你运行你的 for 循环。然后用 i = 0 开始 mySeries,以便将第一个未定义的值添加到 mySeries。相反,如果您开始 i = 1 或将 myData for 循环更改为 i = 0 那么它应该可以工作.

换句话说,这样做:

var myData = new Array();
for (var n=0; n<10; n++){
myData[n]=Math.floor((Math.random() * 10) + 1);
}
var mySeries = [];
for (var i = 0; i < myData.length; i++){
mySeries.push([i,myData[i]]);
}

也就是说,出于效率原因,我会将您的数据生成压缩到一个 for 循环中,这也可以解决问题:

//define an empty array
var mySeries = [];

for (var i = 0; i < 10; i++){
//create your value
var d = Math.floor((Math.random() * 10) + 1);
//push an array into your array
mySeries.push([i,d]);
}

关于javascript - HighCharts 和 Javascript 将数据作为数组传递,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37901671/

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