JavaScript 来自 JSON 的图表，在 Cordova 中使用 AJAX

Question

我是 Cordova 的新手，我正在使用 canvas Js 在图表中显示数据。在这个 tutorial 之后，我创建了一个 Json 文件并插入了与教程中提到的相同的数据，遵循每个步骤并且运行代码工作完美，如下图所示。

现在我想在 xAxis 上显示 datetime，为此我遵循了这个 tutorial 并且我能够在 xAxis 上查看带有日期时间的图表，如下图所示

但是当我在 json 中插入相同的日期时间格式并想查看我的图表时，图表是空的，下面是我的 json 数据

[
  [ 1088620200000, 71 ],
  [ 1104517800000, 65 ],
  [ 1112293800000, 72 ],
  [ 1136053800000, 52 ],
  [ 1157049000000, 49 ],
  [ 1162319400000, 62 ],
  [ 1180636200000, 78 ],
  [ 1193855400000, 55 ],
  [ 1209580200000, 22 ],
  [ 1230748200000, 65 ],
  [ 1241116200000, 100 ],
  [ 1262284200000, 58 ],
  [ 1272652200000, 74 ],
  [ 1291141800000, 79 ],
  [ 1304188200000, 58 ]
]

下面是我的javascript代码

$(window).on('load', function () {
        var dataPoints = [];
        $.getJSON("data.json", function (data) {
            $.each(data, function (key, value) {
                dataPoints.push({ x: value[0], y: parseInt(value[1]) })
            });
        });
        var chart = new CanvasJS.Chart("container", {
            zoomEnabled: true,
            zoomType: "xy",
            animationEnabled: true,
            animationDuration: 2000,
            exportEnabled: true,

            title: {
                text: "Energy vs Date Time"
            },
            axisY: {
                title: "EnergykWh",
                interlacedColor: "#F8F1E4",
                tickLength: 10,
                suffix: "k",
            },
            data: [
                {
                    type: 'column',
                    xValueType: "dateTime",
                    //xValueFormat: "YYYY-MM-DD",
                    showInLegend: true,
                    name: "series1",
                    legendText: "EnergykWh",
                    dataPoints: dataPoints
                    //    [
                    //                { x: 1088620200000, y: 71 },
                    //                { x: 1104517800000, y: 55 },
                    //                { x: 1112293800000, y: 50 },
                    //                { x: 1136053800000, y: 65 },
                    //                { x: 1157049000000, y: 95 },
                    //                { x: 1162319400000, y: 68 },
                    //                { x: 1180636200000, y: 28 },
                    //                { x: 1193855400000, y: 34 },
                    //                { x: 1209580200000, y: 14 },
                    //                { x: 1230748200000, y: 34 },
                    //                { x: 1241116200000, y: 44 },
                    //                { x: 1262284200000, y: 84 },
                    //                { x: 1272652200000, y: 4 },
                    //                { x: 1291141800000, y: 44 },
                    //                { x: 1304188200000, y: 11 }
                    //]
                }
            ]
        });

        chart.render();
    });

在上面的代码中，dataPoints 中有一个 commented 部分与我的 Json 中的相同，当我删除注释标记和运行代码时我可以完美地看到图表中的数据，但是当我想从 json 文件中检索它时，我将无法在图表

上看到任何内容

我一定是遗漏了什么，非常感谢任何帮助

Answer 1

最简单的方法是将 json 数据存储到 javascript 文件中，同时将数据存储到变量中，然后将其包含在 html 页面中。之后使用 .js 文件中的变量，并执行 for loop，这个 for 循环将获取您的数据，然后您可以在图表中查看它。请参阅下面的代码以获得更多理解。

将 json 数据保存到 javascript 文件中

var jsonData = [{ "x": "2016-06-25 12:58:52", "y": 10.22 }, { "x": "2016-14-25 14:42:47", "y": 24.73 },
            { "x": "2016-07-25 13:33:23", "y": 11.14 }, { "x": "2016-15-25 15:07:26", "y": 26.58 },
            { "x": "2016-08-25 13:49:18", "y": 13.58 }, { "x": "2016-16-25 15:14:49", "y": 27.66 },
            { "x": "2016-09-25 13:55:01", "y": 15.25 }, { "x": "2016-17-25 15:32:51", "y": 28.68 },
            { "x": "2016-10-25 14:00:15", "y": 17.25 }, { "x": "2016-18-25 15:40:32", "y": 30.73 },
            { "x": "2016-11-25 14:23:31", "y": 19.99 }, { "x": "2016-19-25 15:58:07", "y": 32.46 },
            { "x": "2016-12-25 14:30:36", "y": 21.78 }, { "x": "2016-20-25 16:21:25", "y": 34.79 },
            { "x": "2016-13-25 14:34:23", "y": 23.45 }];

在 html 页面中包含您的 javascript 文件

<script type="text/javascript" src="scripts/json.js"></script>

使用for循环获取x和y数据

for (var i = 0; i < jsonData.length; i++) {
           dataPoints.push({
              x: new Date(jsonData[i].x),
              y: jsonData[i].y
          });
        }

在canvasJs中传递这个数据点

     data: [
            {
                type: 'column',
                xValueType: "dateTime",// no use for it
                //xValueFormat: "YYYY-MM-DD",// use xValueFormat 
                showInLegend: true,
                name: "series1",
                legendText: "EnergykWh",
                dataPoints: dataPoints

            }
        ]

我希望这能奏效

JavaScript 来自 JSON 的图表，在 Cordova 中使用 AJAX

JavaScript Charts from JSON using AJAX in Cordova

javascript

json

ajax

cordova

canvasjs