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(' &divide; ');
        $('#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('');

on 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);

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

Morris.js和datepicker动态图表

2 个答案: