Question

只测试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创建方法，我都有一个空白图表（根本没有数据，没有标签，没有任何东西）。

E.g。我试过了：

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中的“回答”选项卡：

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,',').")";

这是空白图表的图像！

Answer 1

问题是，你的json发送带引号的timeStamps“”意味着它发送为字符串，而它应该是一个数字。

它应该不喜欢

  ['1436918400000', 10.00]OR "[1437004800000, 1415.00]"

但是喜欢这个\

[[1436918400000, 10.00],[1437004800000, 1415.00]] //and so on

Highcarts：帮助创建JSON

1 个答案: