Question

我是cordova的新手，我正在创建一个简单的应用程序，它从json获取数据，然后将其显示在图表上。但是为了获取数据，用户应该选择序列号，然后该序列号与放置在json中的序列号匹配，获取它的数据，将其存储在变量中，然后将其显示在图表上。贝娄是我在html

中创建的下拉列表

<select class="dropdown" id="dd">
        <option value="" selected="selected">Select Serial Number</option>
        <option value="11111111">11111111</option>
        <option value="22222222">22222222</option>
        <option value="33333333">33333333</option>
        <option value="44444444">44444444</option>
        <option value="55555555">55555555</option>
    </select>

Bellow是json文件中的.js数据

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

现在我想要的是选择与上述序列号匹配的序列号，并将其存储在名为var dataPoints = [];的变量中，然后我将其传递给图表

Bellow是我想要输入数据的图表代码

 $(window).on('load', function () {// i haven't place all my chart code but just the **data** section
data: [{
                //legendText: "EngergykWh",
                showInLegend: true,
                    type: 'column',
                    //xValueType: "dateTime",
                    xValueFormatString:"D/MM h:mm",
                    //xValueFormatString: "YYYY-MM-DD hh:mm:ss TT",
                    showInLegend: true,
                    name: "series1",
                    legendText: "EnergykWh",
                    dataPoints: dataPoints // this should contain only specific serial number data

                }]
chart.render();
});

我坚持认为，任何帮助都将受到高度赞赏

Answer 1

您可以使用jQuery读取所选值，并对所选值的更改执行必要的操作。

$( ".dropdown" ).change(function() {
    chart.options.data[0].dataPoints = [];
    var e = document.getElementById("dd");
    var selected = e.options[e.selectedIndex].value;
    dps = jsonData[selected];
    for(var i in dps) {
        var xVal = dps[i].x;
        chart.options.data[0].dataPoints.push({x: new Date(xVal), y: dps[i].y});
    }
    chart.render();
});

查看示例here。

您应该考虑检查您的JSON值。应该在JS中将月份编入索引，或者在渲染图表之前应该在JSON之外处理它。

Cordova canvasjs在从下拉列表中选择时显示图表上的数据

1 个答案: