Question

我有一个日期范围选择器，可以触发开始和结束日期。我正在尝试在更新开始/结束日期后更新2个图表。我不确定如何从我的getJSON调用jquery调用中传递和解析日期变量。

JSON：

{
    "bar": {
        "bar1": {
            "x": "1/1/2014",
            "a": "9",
            "b": "6"
        },
        "bar2": {
            "x": "1/2/2014",
            "a": "5",
            "b": "7"
        },
        "bar3": {
            "x": "1/3/2014",
            "a": "8",
            "b": "9"
        },
        "bar4": {
            "x": "2/1/2014",
            "a": "7",
            "b": "9"
        }
    },
    "barstack": {
        "bar1": {
            "x": "1/1/2014",
            "y": "9",
            "z": "6",
            "a": "8"
        },
        "bar2": {
            "x": "1/2/2014",
            "y": "5",
            "z": "7",
            "a": "3"
        },
        "bar3": {
            "x": "1/3/2014",
            "y": "8",
            "z": "9",
            "a": "6"
        },
        "bar4": {
            "x": "2/1/2014",
            "y": "7",
            "z": "9",
            "a": "8"
        }
    }
}

jquery调用JSON文件：

(function ($, window, undefined) {
    "use strict";
    $(document).ready(function ($) {
        $.getJSON( "js/data.json", function( json ) {
        //console.log(Object.keys(json.line).map(function(key) {return json.line[key]}));

        if (typeof Morris != 'undefined') {

            //Bar chart
           Morris.Bar({
                element: 'barchart',
                axes: true,
                data: Object.keys(json.bar).map(function(key) {return json.bar[key]}),
                resize: true,
                xkey: 'x',
                ykeys: ['a', 'b'],
                labels: ['myCalories','myCaloriesBurned'],
                barColors: ['#558C89','#D9853B']
            });

           Morris.Bar({
                element: 'barstacked',
                data: Object.keys(json.barstack).map(function(key) {return json.barstack[key]}),
                resize: true,
                xkey: 'x',
                ykeys: ['y', 'z', 'a'],
                labels: ['Tennis', 'Golf', 'Running'],
                stacked: true,
                barColors: ['#558C89', '#74AFAD', '#D9853B']
            });
        }      
    });
    });
})(jQuery, window);

Answer 1

不确定问题是什么，您提供的示例逐字逐句。

使用mockjax（创建虚假的AJAX响应）我能够立即使用它。

的 Live Demo

<强> HTML

<div id="barchart" style="height: 250px;"></div> <div id="barstacked" style="height: 250px;"></div>

<强> JS

$.mockjax({ url: '/js/data.json', responseTime: 750, responseText: { "bar": { "bar1": { "x": "1/1/2014", "a": "9", "b": "6" }, "bar2": { "x": "1/2/2014", "a": "5", "b": "7" }, "bar3": { "x": "1/3/2014", "a": "8", "b": "9" }, "bar4": { "x": "2/1/2014", "a": "7", "b": "9" } }, "barstack": { "bar1": { "x": "1/1/2014", "y": "9", "z": "6", "a": "8" }, "bar2": { "x": "1/2/2014", "y": "5", "z": "7", "a": "3" }, "bar3": { "x": "1/3/2014", "y": "8", "z": "9", "a": "6" }, "bar4": { "x": "2/1/2014", "y": "7", "z": "9", "a": "8" } } } }); (function ($, window, undefined) { "use strict"; $(document).ready(function ($) { $.getJSON( "/js/data.json", function( json ) { //console.log(Object.keys(json.line).map(function(key) {return json.line[key]})); if (typeof Morris != 'undefined') { //Bar chart Morris.Bar({ element: 'barchart', axes: true, data: Object.keys(json.bar).map(function(key) {return json.bar[key]}), resize: true, xkey: 'x', ykeys: ['a', 'b'], labels: ['myCalories','myCaloriesBurned'], barColors: ['#558C89','#D9853B'] }); Morris.Bar({ element: 'barstacked', data: Object.keys(json.barstack).map(function(key) {return json.barstack[key]}), resize: true, xkey: 'x', ykeys: ['y', 'z', 'a'], labels: ['Tennis', 'Golf', 'Running'], stacked: true, barColors: ['#558C89', '#74AFAD', '#D9853B'] }); } }); }); })(jQuery, window);

jquery解析JSON结果

1 个答案: