刚刚测试 Highchars 库 ( http://www.highcharts.com/ )。
我需要此页面的相同图表:http://www.highcharts.com/demo/line-time-series
我有这张表:
+-------------+------------------+
| amountFinal | date_transaction |
+-------------+------------------+
| 10.00 | 2015-07-15 |
| 1415.00 | 2015-07-16 |
| 1545.00 | 2015-07-17 |
| 1309.00 | 2015-07-18 |
| 97.00 | 2015-07-20 |
| 1625.00 | 2015-07-21 |
| 1248.00 | 2015-07-22 |
| 752.00 | 2015-07-23 |
| 2199.00 | 2015-07-24 |
| 2370.00 | 2015-07-25 |
| 1141.00 | 2015-07-27 |
| 1873.00 | 2015-07-28 |
| 4275.00 | 2015-07-29 |
+-------------+------------------+
这是我的 Javascript 部分(与示例相同):
$.getJSON(chart_url, function (data) {
$(container_chart).highcharts({
chart: {
zoomType: 'x'
},
title: {
text: 'USD to EUR exchange rate over time'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
},
xAxis: {
type: 'datetime'
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: false
},
plotOptions: {
area: {
/*fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},*/
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type: 'area',
name: 'USD to EUR',
data: data
}]
});
});
无论我使用什么 JSON 创建方法，我都会得到一个空白图表(根本没有数据，没有标签，什么都没有)。
例如我尝试过:
foreach ($result as $key=>$value) {
$date = (strtotime($value['date_transaction']))*1000; //convert from Unix timestamp to JavaScript time
$point = $value['amountFinal'];
$data[] = "['$date', $point]";
}
echo json_encode($result);
或者直接进行测试:
$data[] = "[Date.UTC(2015, 10, 16), 5]";
$data[] = "[Date.UTC(2015, 10, 17), 7.5]";
$data[] = "[Date.UTC(2015, 10, 18), 1440.0]";
header("content-type: application/json");
echo "data(".join($data,',').")";
感谢您的支持!
编辑:
这是我的 Json，Firebug 中的“answer”选项卡:
data(['1436918400000', 10.00],['1437004800000', 1415.00],['1437091200000', 1545.00],['1437177600000'
, 1309.00],['1437350400000', 97.00],['1437436800000', 1625.00],['1437523200000', 1248.00],['1437609600000'
, 752.00],['1437696000000', 2199.00],['1437782400000', 2370.00],['1437955200000', 1141.00],['1438041600000'
, 1873.00],['1438128000000', 4275.00],['1438214400000', 430.00],['1438300800000', 840.00],['1438387200000'
, 1994.00],['1438560000000', 903.00],['1438646400000', 1868.00],['1438732800000', 1097.00],['1438819200000'
, 3408.00],['1438905600000', 5335.00],['1438992000000', 1131.00],['1439078400000', 1050.00],['1439164800000'
, 2784.00],['1439251200000', 867.00],['1439337600000', 916.00],['1439424000000', 914.00],['1439510400000'
, 773.00],['1439596800000', 1175.00],['1439769600000', 526.00],['1439856000000', 1014.00],['1439942400000'
, 236.00],['1440028800000', 175.00],['1440115200000', 1954.00],['1440201600000', 549.00],['1440288000000'
, 625.00],['1440374400000', 377.00],['1440460800000', 489.00],['1440547200000', 219.00],['1440633600000'
, 428.00],['1440720000000', 272.00],['1440806400000', 363.00],['1440979200000', 755.00],['1441065600000'
, 659.00],['1441152000000', 286.00],['1441238400000', 414.00],['1441324800000', 462.00],['1441411200000'
, 2723.00],['1441497600000', 250.00],['1441584000000', 179.00],['1441670400000', 137.00],['1441756800000'
, 384.00],['1441843200000', 380.00],['1441929600000', 391.00],['1442016000000', 1121.00],['1442188800000'
, 424.00],['1442275200000', 1632.00],['1442361600000', 2489.00],['1442448000000', 677.00],['1442534400000'
, 2870.00],['1442620800000', 1767.00],['1442707200000', 500.00],['1442793600000', 570.00],['1442880000000'
, 767.00],['1442966400000', 784.00],['1443052800000', 1655.00],['1443139200000', 1211.00],['1443225600000'
, 1279.00],['1443312000000', 260.00],['1443398400000', 392.00],['1443484800000', 1275.00],['1443571200000'
, 3428.00],['1443657600000', 1912.00],['1443744000000', 1565.00],['1443830400000', 2473.00],['1443916800000'
, 1145.00],['1444003200000', 1318.00],['1444089600000', 2969.00],['1444176000000', 4328.00],['1444262400000'
, 3487.00],['1444348800000', 3785.00],['1444435200000', 1980.00],['1444521600000', 1075.00],['1444608000000'
, 1232.00],['1444694400000', 2298.00],['1444780800000', 2628.00],['1444867200000', 3686.00],['1444953600000'
, 656.00])
Console.log 打印相同的内容。
这是打印数据的 PHP 代码:
foreach ($result as $key=>$value) {
$date = (strtotime($value['date_transaction']))*1000; //convert from Unix timestamp to JavaScript time
$point = $value['amountFinal'];
$data[] = "['$date', $point]";
}
header("content-type: application/json");
echo "data(".join($data,',').")";
这是空白图表的图像!
最佳答案
问题是，您的 json 正在发送带有引号“”的时间戳，意味着它作为字符串发送，而它应该是数字。
不应该这样
['1436918400000', 10.00]OR "[1437004800000, 1415.00]"
但是像这样\
[[1436918400000, 10.00],[1437004800000, 1415.00]] //and so on
关于javascript - Highcharts : help to create the JSON，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33169575/