javascript 内的 smarty 变量

Question

我正在尝试使用 google-charts 生成饼图。当我使用静态数据时它工作正常，现在我想使用动态数据生成图表。来自我的 data.php 文件。我已经生成了这些数据： 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()。如何正确传递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>

Answer 2

我们可以通过在顶部初始化 javascript 变量来做到这一点。

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

javascript 内的 smarty 变量

smarty variable inside javascript

javascript

php

jquery

smarty

google-visualization