亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何轉換mysql查詢的數組結果以在chartist.js中使用

如何轉換mysql查詢的數組結果以在chartist.js中使用

PHP
白板的微信 2023-08-26 17:35:35
我有一個疑問$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 替換時間戳/用 y 替換時間戳并在 javascript 中使用它(在循環中?)?
查看完整描述

1 回答

?
斯蒂芬大帝

TA貢獻1827條經驗 獲得超8個贊

在 SQL 中,使用 UNIX_TIMESTAMP 獲取正確格式的日期,并將列別名為 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);

});

然后使用圖表中的數據


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

    name: 'series-1',

    data: data

  },

如果您通過 AJAX 從 PHP 獲取 JSON 字符串,則只需傳入結果字符串并以相同的方式解析它即可。


查看完整回答
反對 回復 2023-08-26
  • 1 回答
  • 0 關注
  • 136 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號