配列としてデータを渡すためのHighChartsとJavascript

配列をJavascriptの変数としてHighChartsグラフに渡そうとしています。マーカーが付いているポイントは正しく表示されますが、ドットを結んでいるスプラインはありません（データ2、紫色）。同じチャートを試してみましたが、配列に値を直接渡しましたが、今回はHighChartsがマーカーとスプライン（データ1、赤色）を表示しています。両方のシリーズでは、すべてのラインパラメータ（lineWidth、dashStyle、color）が設定されています。私はIE11とChromeとFireFoxでテストしましたが、結果は同じです... 以下は完全なコードです。既に誰かがこの問題に遭遇した場合、またはこれを解決する方法を知っていれば（両方のデータをマーカで表示し、それらのマーカにラインを追加する）、私は非常に興味があります。どうもありがとう！！配列としてデータを渡すためのHighChartsとJavascript

<!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>

出典

2016-06-18 Julien

私はmySeriesのあなたの最初の値がundefinedあるのでHighchartsは黙ってスプラインを描画するのに失敗していると信じています。 myDataで

あなたはn = 1で降り始めるので、あなたがあなたのforループを実行した後myData[0]はまだundefinedです。その後、最初に定義されていない値がmySeriesに追加されるように、i = 0でmySeriesを開始します。代わりにi = 1を開始するか、またはmyDataforループをi = 0に変更すると動作します。言い換えれば

は、次の操作を行います。

、私も問題除去するであろう、効率上の理由から、1つの forループにあなたのデータの生成を凝縮すると述べ

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

：

//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]); 
}

出典

2016-06-19 00:36:27 elliot

恐ろしい、エリオットを、ありがとう、それは働いている多くの！あなたは私に多くの時間を救った！本当に感謝！ – Julien

それを聞いてうれしいです。「Accept Accept」ボタンをクリックしてください。 – elliot

配列としてデータを渡すためのHighChartsとJavascript

答えて

関連する問題