Javascript 如何转换mysql查询的数组结果以在chartist.js中使用

我有一个问题

$array1 = $wpdb->get_results( "SELECT timestamp,temp FROM $table_name ORDER BY id desc LIMIT 8", ARRAY_A );
$data1 = json_encode($array1);
echo $data1;

结果如下：

[
  {"timestamp":"2020-07-26 09:50:25","temp":"26.31"},
  {"timestamp":"2020-07-26 09:40:29","temp":"26.37"},
  {"timestamp":"2020-07-26 09:30:33","temp":"26.31"},
  {"timestamp":"2020-07-26 09:20:37","temp":"26.43"},
  {"timestamp":"2020-07-26 09:19:56","temp":null},
  {"timestamp":"2020-07-26 08:54:54","temp":"26.37"},
  {"timestamp":"2020-07-26 08:44:58","temp":"26.18"},
  {"timestamp":"2020-07-26 08:35:02","temp":"26.25"}
]

我想用它作为图表的输入

为chartist.js（也包括moments.js）提供的模板如下所示：

var chart = new Chartist.Line('.ct-chart', {  series: [    {
  name: 'series-1',
  data: [
    {x: new Date(143134652600), y: 53},
    {x: new Date(143234652600), y: 40},
    {x: new Date(143340052600), y: 45},
    {x: new Date(143366652600), y: 40},
    {x: new Date(143410652600), y: 20},
    {x: new Date(143508652600), y: 32},
    {x: new Date(143569652600), y: 18},
    {x: new Date(143579652600), y: 11}
  ]
},

---

等等。如何在php中转换此数组/将时间戳替换为x/temp替换为y并在javascript中使用它（在循环中？）

在sql中，使用UNIX_时间戳以正确的格式获取日期，并将列别名为x和y

$array1 = $wpdb->get_results( "SELECT UNIX_TIMESTAMP(timestamp) as x,temp as y FROM $table_name ORDER BY id desc LIMIT 8", ARRAY_A );
$data1 = json_encode($array1);

JSON按照您所做的方式对数据进行编码

根据将JSON接收为JavaScript的方式，循环遍历数组，并将时间戳转换为日期，将值转换为浮点值。下面假设PHP被回送到JavaScript中

var data = JSON.parse('<?php echo $data1; ?>');
data.forEach(function(row){
  row.x = new Date(parseInt(row.x));
  row.y = parseFloat(row.y);
});

---

如果您通过AJAX从PHP获取JSON字符串，那么只需传入结果字符串并以相同的方式对其进行解析。

不要使用JSON，请从结果集中构建一个数组。使用UNIX_timestamp（timestamp）而不是timestamp不要立即

json_encode（$array1）

，循环结果以创建具有所需结构的新数组，

json_encode（）

新的数组是您使用AJAX调用PHP以获得JSON结果，还是在页面加载时输出图表数据？我拥有的是一个Wordpress站点，该站点具有PHP模板和MySQL中的自定义表。我没有使用Ajax。虽然我想如果我想创建用于调整查询的按钮，我需要。现在我只是想一步一步地把事情弄清楚。谢谢。它似乎确实创建了一个图形，或者至少放置了点和y轴。x轴显示5次“1月19日”。而且它不像原始示例那样连接点。虽然我真的不需要。另外-最后一次转换是在javascript中完成的-是否也可以在php中更改值？这是赞成还是反对？如果我需要对这些值进行一些数学运算，包括一个if语句，怎么样？e、 g.0-360之间的值，如果>180则为360-值。如果我的查询结果不是8而是2000，这是否重要？可能还有5个图形（也来自其他列）？在测试时，我从（）中删除了'value'：return moment（）.format（'YYYY-MM-DD HH:MM'）；并更改了日期+时间格式：它以当前时间为标签。我想说它没有连接点，还有其他问题，因为您需要为图表列表提供更多选项。行设置，请查看他们的文档。您必须用JavaScript进行日期转换，因为根据您的标准/示例，x需要一个JavaScript日期对象。对于所有其他过滤器、条件等，请在PHP中执行此操作。我不知道ChartList插件，所以不能说它将如何处理2000点，但PHP方面应该很好。我搞不懂你最后的评论是什么意思。如果我的答案对你有用，如果你能接受，我将不胜感激。我想你关于javascript日期对象的看法是对的。x轴不是我不能继续工作。我还认为它必须是Unix格式，以毫秒为单位，我相信现在是以秒为单位。我会做更多的测试。

var chart = new Chartist.Line('.ct-chart', {  series: [    {
    name: 'series-1',
    data: data
  },