2017-12-08 12 views
1

、HTML内 はGoogleのコンボチャートの問題

var examname = <?php echo json_encode($examnames); ?>; 
var highestScore = <?php echo json_encode($heighestScores); ?>; 
var userScore = <?php echo json_encode($userScores); ?>; 

の結果は

var examname = ["Test Name 1", "Full Test", "Knowledge"]; 
var highestScore = ["8", "11", "10"]; 
var userScore = ["6", "11"]; 



google.charts.load('current', { 
     'packages': ['corechart'] 
     }); 
     google.charts.setOnLoadCallback(drawVisualization); 

     function drawVisualization() { 
     // Some raw data (not necessarily accurate) 
     var graphData = new google.visualization.DataTable(); 
     graphData.addColumn('string', 'TestName'); 
     graphData.addColumn('number', 'Height'); 
     graphData.addColumn('number', 'YourScore'); 

     for (var i = 0; i < examname.length; i++) { 
      if (userScore[i] === undefined) { 
      userScore[i] = 0; 
      } 
      console.log(userScore[i]); 
      graphData.addRow(examname[i], { 
      v: highestScore[i], 
      f: userScore[i] 
      }); 
     } 
     //graphData = graphData.replace(/'/g, '"'); 
     //var data = google.visualization.arrayToDataTable(graphData); 
     console.log(data); 
     var options = { 
      title: 'Score Dashboard', 
      vAxis: { 
      title: 'Score' 
      }, 
      hAxis: { 
      title: 'Exam Name' 
      }, 
      seriesType: 'bars', 
      series: { 
      5: { 
       type: 'line' 
      } 
      } 
     }; 

     var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); 
     chart.draw(graphData, options); 
     } 
でCDNとdivの

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<div id="chart_div" style="width: auto; height: 500px;"></div> 

の下に追加

JSFIDDLE

私はエラーを取得しています:

Error: If argument is given to addRow, it must be an array, or null

も、私はグーグルで検索が、私は理解していませんでした。いずれかの人が問題を解決するのに手伝ってください。

+1

Uhm ...エラーメッセージは、問題の内容を正確に伝えていませんか?配列ではない配列の要素を、引数としてgraphData.addRowに渡しています。 –

+0

問題を解決しました。ありがとうございました –

答えて

2

あなたの渡し(文字列、オブジェクト)。それがちょうど(配列)を期待しているとき。

変更

graphData.addRow(examname[i], { 
    v: highestScore[i], 
    f: userScore[i] 
}); 

graphData.addRow([ 
    examname[i], 
    Number(highestScore[i]), 
    Number(userScore[i]) 
]); 

実施例に:https://jsfiddle.net/g4vjvam9/

注:あなたが満たされた最後の列をしたい場合は、値を追加する必要があります:/

var userScore = ["6", "11", "2"]; 

また、上記のように​​を使用する必要がある文字列は避けてください。

+0

ありがとう、それは私のために働いています。 –

+0

np、喜んで助けてください。 –

+0

アニメーションが動作していない、更新済み[fiddle](https://jsfiddle.net/nelsonfeel/hmcre1fm/4/) –

関連する問題