Morris.js和datepicker动态图表

Question

我希望你能帮我一点,因为我不是jquerymaster.我正在尝试显示一个基于datepicker传递的值进行更新的图表.

我的datepicker函数如下所示:

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

作为我用morris图表完成的版本,功能

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 ...
});

希望这可以帮助.

Answer 2

您可以将Morris Chart对象存储到全局变量中,稍后再访问其方法.

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

然后

_chart.setData(_data);

请注意,您无需在此处传递完整选项,只需要数据.