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

Question

我是 cordova 的新手，我正在制作一个简单的应用程序，它从 json 获取数据，然后将其显示在图表上。但是为了获取数据，用户应该 select 一个序列号，然后该序列号与 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>

波纹管是我的 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 }
]}

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

波纹管是我的图表代码，我想把我的数据放在这里

 $(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 中从 0-11 索引，或者你应该在呈现图表之前在 JSON 之外处理它。

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

Cordova canvasjs show data on chart while selecting from a dropdown list

javascript

jquery

json

cordova

canvasjs