0

我正在尝试根据用户选择的日期范围动态更新一系列图表。我正在使用 morris.js 创建通过 JSON 文件提供数据的图表。我想做的是最初在图表上显示最近 7 天的数据，然后如果用户更改日期范围，我希望图表根据用户请求刷新。

这是我的图表元素：

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

我所有的图表都包含在一个单独的 charts.js 文件中：

Morris.Bar({
                element: 'barchart',
                axes: true,
                data: Object.keys(json.bar).map(function(key) {return json.bar[key]}),
                xkey: 'x',
                ykeys: ['a', 'b']
            });

这是 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": "1/4/2014",
        "a": "7",
        "b": "9"
    }
}

这是日期范围回调——我不确定一旦回调触发，如何准确更新图表的数据元素。

$(document).ready(function() {var cb = function(start, end) {
                    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));

编辑：这是获取 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']
            });
        }      
    });
    });
})(jQuery, window);
4

0 回答 0