Morris.js 및 datepicker 동적 차트

Question

전 jquerymaster가 아니므로 조금 도와 줄 수 있기를 바랍니다. 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(); 

그리고 내 차트는 다음과 같습니다 :

내 날짜 선택기 기능은 다음과 같습니다 나는 내가 날짜 선택기 함수에 onchange를 기능을 기반으로 새 JSON 파일을로드 할 수 있습니다 알고

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'] 
     }); 

새로운 차트를 추가 할 수 없도록 이전 차트를 대체하려고합니다.

제 질문은 분명하고 이해할 수 있기를 바랍니다.

Answer 1

모리스 차트 개체를 전역 변수에 저장하고 나중에 해당 메서드에 액세스 할 수 있습니다.

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

이후

_chart.setData(_data);

여기에 전체 옵션을 전달하지 않고 단지 데이터가 필요하다는 것을 유의하시기 바랍니다. 내가 모리스 차트와 함께 수행 한 버전으로

Answer 2

, 기능

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

및 _chart.setData(_data); 여전히 부표가 크롬에서 테스트합니다. html('') 기능을 사용하여 HTML 마크 업을 지울 것을 제안합니다. 예 :

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

이 기능 onchange를 기능에

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

로 클리어. 예

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

희망이 도움이됩니다.