Question

我正在尝试使用Javascript将Array作为变量传递到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>

Answer 1

我相信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]);
}

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

1 个答案: