Google Chart 在 x 轴上绘制带有日期的趋势线 [英] Google Chart draw Trendlines with date on x axis

问题描述

我需要使用 Trendlines 绘制 Google 折线图，但我使用 Ajax 请求将数据放入其中

I need to draw a Google Line Chart with Trendlines, but I use an Ajax request to get data to put inside it

在 ajax 文件中，我将图形元素插入一个数组中，然后像这样将其转换为 JSON:

In the ajax file, I insert in one array the elements of the graphic and after I convert it in JSON like that:

$reply= json_encode($array);
echo $reply;

这是我的ajax回复内容:

This is the content of my ajax reply:

reply = [
    ["Periodo","Rome","Milan","Test"],
    ["20160830",1,2,3],
    ["20160831",2,3,6],
    ["20160901",2,3,20],
    ["20160902",20,30,12]
  ];

在我的程序中，我像这样填充图形:

In my program I populate the graphic like that:

var replyJSON = JSON.parse(reply);
var data = google.visualization.arrayToDataTable(replyJSON);

这是一个类似的例子，说明我拥有什么以及我将要做什么，但在这里我无法复制 ajax 调用:http://jsfiddle.net/roby492/srrrn9sa/384/

This is a similar example of what I have and what I would to do, but here I can't replicate the ajax call: http://jsfiddle.net/roby492/srrrn9sa/384/

我需要得到回复 JSON，转换 jquery 日期中的日期字符串以正确显示趋势线.

I need to get reply JSON, convert the string of date in jquery date to show correctly the trendlines.

我该怎么做?或者我如何通过 Ajax 发送带有日期而不是字符串的 JSON?

How can I do this? Or how Can I send by Ajax the JSON with date instead of a string?

谢谢.罗伯托R.

推荐答案

看看这个 php to google chart via ajax example

这里推荐类似的设置

该示例构建了 google 可接受的 JSON

the example builds JSON that is acceptable by google

允许创建 DataTable，直接从 JSON

which allows creation of the DataTable, directly from the JSON

以下是该答案的片段，它构建了 JSON

following is a snippet from that answer, that builds the JSON

$rows = array();
$table = array();

$table['cols'] = array(
    array('label' => 'Time', 'type' => 'string'),
    array('label' => 'Wind_Speed', 'type' => 'number'),
    array('label' => 'Wind_Gust', 'type' => 'number')
);

while ($row = mysql_fetch_assoc($sqlResult)) {
  $temp = array();
  $temp[] = array('v' => (string) $row['Time']);
  $temp[] = array('v' => (float) $row['Wind_Speed']);
  $temp[] = array('v' => (float) $row['Wind_Gust']);
  $rows[] = array('c' => $temp);
}

$table['rows'] = $rows;

echo json_encode($table);

要在 JSON 中使用实际的日期列，会有点棘手

to use an actual Date column in the JSON, gets a little tricky

主要是因为 JavaScript 中的月份数字是从零开始的，不像 php

primarily because month numbers in JavaScript are zero-based, unlike php

所以如果你在php中格式化一个Date，需要将月份数减少1

so if you format a Date in php, need to reduce the month number by 1

这导致了冗长的格式声明

which makes for a lengthy format statement

在JSON中传递一个日期，可以使用如下格式，注意是作为字符串传递...

to pass a date in JSON, you can use the following format, note that it is passed as a string...

"Date(2016, 8, 28, 15, 34, 40)" --> 相当于今天的日期
再次，月份是从零开始的(8 = 九月)

"Date(2016, 8, 28, 15, 34, 40)" --> which equates to today's date
again, the month is zero-based (8 = September)

因此要在 php 中以这种格式构建日期，您可以使用以下...

so to build a date in this format in php, you can use the following...

$date1 = new DateTime();
$date2 = "Date(".date_format($date1, 'Y').", ".((int) date_format($date1, 'm') - 1).", ".date_format($date1, 'd').", ".date_format($date1, 'H').", ".date_format($date1, 'i').", ".date_format($date1, 's').")";

产生上面显示的 "Date(...)"

调整其他答案中的片段以包含日期列，可能看起来像这样......

adjusting the snippet from the other answer to include a Date column, might look something like this...

$rows = array();
$table = array();

$table['cols'] = array(
    array('label' => 'Date', 'type' => 'date'),
    array('label' => 'Wind_Speed', 'type' => 'number'),
    array('label' => 'Wind_Gust', 'type' => 'number')
);

while ($row = mysql_fetch_assoc($sqlResult)) {
  $date1 = $row['Date'];
  $date2 = "Date(".date_format($date1, 'Y').", ".((int) date_format($date1, 'm') - 1).", ".date_format($date1, 'd').", ".date_format($date1, 'H').", ".date_format($date1, 'i').", ".date_format($date1, 's').")";

  $temp = array();
  $temp[] = array('v' => (string) $date2);
  $temp[] = array('v' => (float) $row['Wind_Speed']);
  $temp[] = array('v' => (float) $row['Wind_Gust']);
  $rows[] = array('c' => $temp);
}

$table['rows'] = $rows;

echo json_encode($table);

从php通过ajax得到以上结果，可以直接建表

getting the above results via ajax from php, you can create the table directly

var data = new google.visualization.DataTable(reply);

无需解析 JSON 或使用 arrayToDataTable

no need to parse the JSON or use arrayToDataTable

这篇关于Google Chart 在 x 轴上绘制带有日期的趋势线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！