jquery - Morris.js 和 datepicker 动态图表

Question

我希望你能帮助我一点，因为我不是jquerymaster。我正在尝试显示一个根据日期选择器传递的值进行更新的图表。

我的日期选择器函数如下所示:

var now3 = new Date();
now3.addDays(-4);
var now4 = new Date()
$('#widgetCalendar').DatePicker({
    flat: true,
    format: 'd-m-Y',
    date: [new Date(now3), new Date(now4)],
    calendars: 3,
    mode: 'range',
    starts: 1,
    onChange: function(formated) {
        $('#widgetField span').get(0).innerHTML = formated.join(' ÷ ');
        $('#test').get(0).innerHTML = 'http://localhost:8888/indkrydsning/app/house/stats_json/' + formated.join('/');
    }
});
var state = false;
$('#widgetField>a').bind('click', function(){
    $('#widgetCalendar').stop().animate({height: state ? 0 : $('#widgetCalendar div.datepicker').get(0).offsetHeight}, 500);
    state = !state;
    return false;
});
$('#widgetCalendar div.datepicker').css(); 

我的图表如下所示:

var json = (function () {
            var json = null;
            $.ajax({
                'async': false,
                'global': false,
                'url': 'http://localhost:8888/indkrydsning/app/house/stats_json/',
                'dataType': "json",
                'success': function (data) {
                    json = data;
                }
            });
            return json;
        })();

        new Morris.Line({
            // ID of the element in which to draw the chart.
            element: 'myfirstchart',


            // Chart data records -- each entry in this array corresponds to a point on
            // the chart.
            data: json,
            // The name of the data record attribute that contains x-values.
            xkey: 'date',
            // A list of names of data record attributes that contain y-values.
            ykeys: ['value'],
            // Labels for the ykeys -- will be displayed when you hover over the
            // chart.
            labels: ['Antal']
        });

我知道我可以根据 datepicker 函数中的 onChange 函数加载一个新的 json 文件，但想替换旧图表，这样就无法附加新图表。

我希望我的问题清晰易懂。

Answer 1

作为我用莫里斯图完成的版本，该函数

var _chart = new Morris.Line({
    element: 'myfirstchart',
    data: json,
    xkey: 'date',
    ykeys: ['value'],
    labels: ['Antal']
});

和_chart.setData(_data);仍然在Chrome中测试附加图表。我建议您使用 html('') 函数清除 HTML 标记。示例:

<div id="morris-chart-area" style="width: 300px"></div>

用此函数清除

$('#morris-chart-area').html('');

在 onChange 函数上。示例

$('dropdownid').on('change',function(){
$('#morris-chart-area').html('');
     //TO DO YOUR MORRIS GENERATED FUNCTION ...
});

希望这有帮助。