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

Question

我正在尝试将数组作为变量传递给 HighCharts 图表，Javascript。带有标记的点显示正确，但没有连接点的样条曲线（数据 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>

Answer 1

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

使用 myData 你从 n = 1 开始，所以 myData[0] 在你运行通过你的 for 循环之后仍然是 undefined。然后用 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]);
}

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

HighCharts and Javascript to pass data as array

javascript

html

arrays

highcharts

spline