JavaScript内のスマート変数

Question

google-chartsを使用してPieChartを生成しようとしています。私は静的なデータを使用しているとき、それは正常に動作している今、私は動的なデータを使用してグラフを生成したい。 私のdata.phpファイルから。私はdataTableの（へchart_dataを渡す方法を確認していない chart_data = [["executed",100],["not_run",0],["passed",98],["failed",1],["blocked",0]]

graph.tpl

<div id="container1" display:inline-block"> 
    <script language="JavaScript"> 
    function drawChart() { 
     // Define the chart to be drawn 
     var data = new google.visualization.DataTable({/literal}'{$chart_data}'{literal}); 
     data.addColumn('string', 'Status'); 
     data.addColumn('number', 'Percentage'); 
     /* 

     data.addRows([ 
      ['Passed', 45.0], 
      ['Failed', 26.8], 
      ['Blocked', 12.8], 
     ['Not Run', 8.5] 
      ]); 
     */ 
     // Set chart options 
     var options = {'title':'Overall Test Progress', 
      'width':420, 
      'height':310}; 

     // Instantiate and draw the chart. 
     var chart = new google.visualization.PieChart(document.getElementById('container1')); 
     chart.draw(data, options); 
    } 
    google.charts.setOnLoadCallback(drawChart); 
    </script> 
    {/literal} 
    </div> 

）：私はこのデータを生成しています。 chart_dataを正しく渡す方法。コンストラクタの引数を使用してDataTableを作成するために

Answer 1

、
それは、特定のJSON形式でas found here

でなければなりませんが、あなたは単純な配列、 を持っている場合は、静的メソッドを使用することができます - >arrayToDataTable

を第二引数のための

var data = google.visualization.arrayToDataTable("{$chart_data}", true); 

true は...最初の行はデータではなく、列の見出しで言う

は、私たちが先頭にjavascriptの変数を初期化することによってこれを行うことができます...作業スニペット以下

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

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([["executed",100],["not_run",0],["passed",98],["failed",1],["blocked",0]], true); 
 
    var options = { 
 
    title: 'Overall Test Progress', 
 
    width: 420, 
 
    height: 310 
 
    }; 
 
    var chart = new google.visualization.PieChart(document.getElementById('container1')); 
 
    chart.draw(data, options); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="container1"></div>

Answer 2

を参照してください。

<div id="container1" display:inline-block"> 
<script> 
var chart_data = "{$chart_data}"; 

{literal} 
function drawChart() { 
    // Define the chart to be drawn 
    var data = new google.visualization.DataTable(chart_data); 
    data.addColumn('string', 'Status'); 
    data.addColumn('number', 'Percentage'); 
    /* 

    data.addRows([ 
     ['Passed', 45.0], 
     ['Failed', 26.8], 
     ['Blocked', 12.8], 
    ['Not Run', 8.5] 
     ]); 
    */ 
    // Set chart options 
    var options = {'title':'Overall Test Progress', 
     'width':420, 
     'height':310}; 

    // Instantiate and draw the chart. 
    var chart = new google.visualization.PieChart(document.getElementById('container1')); 
    chart.draw(data, options); 
} 
google.charts.setOnLoadCallback(drawChart); 
</script> 
{/literal}