3

我希望你能帮助我一点，因为我不是 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 文件，但我想替换旧图表，因此不能附加新图表。

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

4

2 回答 2

6

正如我用莫里斯图所做的那样，函数

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

希望这可以帮助。

于 2014-02-23T12:04:26.160 回答
5

您可以将 Morris Chart 对象存储到一个全局变量中，然后再访问它的方法。

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

然后

_chart.setData(_data);

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

于 2013-08-16T05:23:39.883 回答