javascript - javascript中的smarty变量

Question

我正在尝试使用 google-charts 生成饼图。当我使用静态数据时它工作正常，现在我想使用动态数据生成图表。来 self 的 data.php 文件。我已经生成了这些数据:chart_data = [["执行",100],["未运行",0],["通过",98],["失败",1],["阻塞",0]]

图.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()。如何正确传递 chart_data。

Answer 1

为了使用构造函数参数创建DataTable，
它必须是特定的 json 格式，as found here

但是如果你有一个简单的数组，你可以使用静态方法 --> arrayToDataTable

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

true 第二个参数表示第一行是数据而不是列标题...

请参阅以下工作片段...

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>