Question

我有一个用固定数据提供图表的函数：

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Date', 'CPU Temp'],
        ['2004', 340],
        ['2005',  460],
        ['2006', 1120],
        ['2007',  540]
    ]);
}

我想用从包含两列：date 和 temperature 的数据库表中读取的数据替换固定数据。读取的数据存储在 $json 变量中：

[
  {"datain":"2021-04-20 12:00:03","temp":"39.2"},
  {"datain":"2021-04-21 00:00:05","temp":"40.2"},
  {"datain":"2021-04-21 12:00:03","temp":"40.8"},
  {"datain":"2021-08-01 12:00:12","temp":"47.2"}
]

这是我的错误代码：

let date= "";
let temp = "";
for (let i = 0; i < <?php echo count($json)?>; i++){
    date = <?php echo $json[0] ?>;
    temp = <?php echo $json[1] ?>;
}
  
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Date', 'CPU Temp'],
        [date,  temp]
    ]);
}

我怎样才能做到这一点？

编辑：使用@trincot 的建议编辑后的代码：

< script type = "text/javascript" >
  google.charts.load('current', {
    'packages': ['corechart']
  });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Date', 'Temp'],
    ...<?php echo $json; ?>.map(({
      datain,
      temp
    }) => [new Date(datain), parseFloat(temp)])
  ]);

  var options = {
    title: 'CPU Temp History',
    curveType: 'function',
    legend: {
      position: 'bottom'
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

  chart.draw(data, options);
} <
/script>

原始代码在这里：chart code

Answer 1

鉴于您的 $json 是具有两个属性的对象数组，您需要将其转换为数组（对）数组：

function drawChart() {
    var data = google.visualization.arrayToDataTable([
       ['Date', 'CPU Temp'],
       ...<?php echo $json; ?>.map(({datain, temp}) => [new Date(datain), +temp])
    ]);
}

所以这只是将整个 JSON 注入到作为参数提供给 arrayToDataTable 的数组文字中。 .map 调用将普通对象转换为对，并且：

日期字符串被转换为 Date 对象
温度字符串被转换为数字。遗憾的是，您的 PHP 代码以某种方式将温度存储为字符串。这很奇怪。更好的做法是让它们使用数字数据类型，而不是字符串数据类型。

当您通过浏览器查看源代码时，您应该看到如下内容：

function drawChart() {
    var data = google.visualization.arrayToDataTable([
       ['Date', 'CPU Temp'],
       ...[{"datain":"2021-04-20 12:00:03","temp":"39.2"},{"datain":"2021-04-21 00:00:05","temp":"40.2"},{"datain":"2021-04-21 12:00:03","temp":"40.8"},{"datain":"2021-08-01 12:00:12","temp":"47.2"}].map(({datain, temp}) => [new Date(datain), +temp])
    ]);
}

使用 php 数组作为 JavaScript 函数的参数

1 个答案: