chart.redraw() इवेंट-लाइन

Question

सेट करने के बाद काम नहीं कर रहा है मैं बूटस्ट्रैप स्लाइडर के साथ morris.js चार्ट का उपयोग कर रहा हूं। स्लाइडर ले जाया जाता है
हैं, मैं स्लाइडर मूल्य की स्थिति में चार्ट में एक घटना लाइन सम्मिलित करना चाहते हैं:

मैं आपकी क्या अपेक्षाएं हैं। कुछ खास नहीं।

समस्या:
चार्ट घटना सेट करने के बाद redrawing नहीं है। नया डेटा डालने पर, चार्ट स्वचालित रूप से फिर से खींचा जाएगा। इसलिए मैं ताज़ा कोशिश की (सही सिंटैक्स के लिए जाँच करने के लिए) इस तरह फिर से चार्ट करने के लिए मौजूदा डेटा को पारित करके:

chart.setData(chart.options.data); 

यह काम कर रहा है! नया कार्यक्रम चार्ट में खींचा जाता है। दुर्भाग्यवश इसका खराब प्रदर्शन है क्योंकि चार्ट सभी डेटा को दोबारा हटा रहा है।

प्रलेखन का कहना है कि chart.redraw() है। यह सिर्फ मेरे लिए काम नहीं कर रहा है। शायद आप में से कोई भी क्यों पता लगा सकता है।

बस स्निपेट चलाएं और दोनों विधियों का परीक्षण करने के लिए रेडियो-बटन स्विच करें और आपको समस्या दिखाई देगी।

// Chart creation - not interesting 
 
var chart = new Morris.Line({ 
 
    element: 'chart', 
 
    ymin: 0, 
 
    ymax: 100, 
 
    gridIntegers: true, 
 
    parseTime:false, 
 
    // Will be set below 
 
    data: [ ], 
 
    xkey: 'position', 
 
    ykeys: ['value'], 
 
    labels: ['Value'], 
 
    hideHover: "always", 
 
    pointSize: 0, 
 
    continuousLine: false, 
 
    goalStrokeWidth: 3, 
 
    axes: true, 
 
    grid: true, 
 
    numLines: 6, 
 
    eventLineColors: [ "red" ], 
 
    smooth: true 
 
}); 
 

 
// Inserting some values 
 
var values = [101] 
 
for(i = 1; i <= 100; i += 1) { 
 
    var x = 100/(Math.pow((i-50), 2)+4); 
 
    values.push({ position: i, value: x }); 
 
} 
 
chart.setData(values); 
 

 
// Create slider 
 
$('#slider').slider({ 
 
    tooltip: 'never', 
 
    tooltip_position:'left', 
 
    height: 300, 
 
    length: 300, 
 
}); 
 

 
// If the slider moves, I want to set its value as an event-line 
 
$("#slider").on("slideStop", function(slideEvt) { 
 
    chart.options.events = [ slideEvt.value ]; 
 

 
    // Check inserting-data VS chart.redraw() 
 
    // Both should work... chart.redraw() isnt. 
 
    if(document.getElementById('insert').checked) 
 
     chart.setData(chart.options.data); 
 
    else if(document.getElementById('redraw').checked) 
 
     chart.redraw(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
 
<script src="http://cdn.oesmith.co.uk/morris-0.5.1.min.js"></script> 
 
<link href="http://cdn.oesmith.co.uk/morris-0.5.1.css" rel="stylesheet"/> 
 

 
<!-- Bootstrap slider --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.min.css"> 
 

 
<div id="chart" style="height: 150px;width:500px;"></div> 
 
<form action=""> 
 
    <input checked="true" id="insert" type="radio" name="refreshMethod"> Insert (working)<br> 
 
    <input id="redraw" type="radio" name="refreshMethod"> Redraw (not working)<br> 
 
</form> 
 
<input id="slider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50"/>

मैं यहाँ में हर सहायता की सराहना करते। आपका बहुत बहुत धन्यवाद!

महत्वपूर्ण संपादित करें:
जैसे ही मैंने एक इनाम (+1 घंटा) मैं ऐसा करता हूँ सेट कर सकते हैं। इस सवाल का एक बहुत ही महत्वपूर्ण हिस्सा यह है कि स्लाइडर को सिंगल चार्ट-इवेंट में बाध्य करने के बिना कैसे बाध्य करना है। वर्तमान में slideStop के बजाय slide ईवेंट का उपयोग करते समय प्रदर्शन बहुत कम है।

Answer 1

यह काम नहीं कर रहा है क्योंकि जब आप chart.redraw() पर कॉल करते हैं तो आंतरिक रूप से chart.events सेट नहीं किया जा रहा है। यह संपत्ति setData के अंदर this.events = this.options.events के साथ सेट की गई है। बजाय chart.options.events = [val];

निजी तौर पर अपने कोड उपयोग chart.events = [val] में, मैं उन दोनों को मामले setData में सेट करते हैं फिर भी कहा जाता है, लेकिन यह आप पर निर्भर है:

इस के लिए सही करने के लिए।

तो अपने डेमो में:

... 
else if(document.getElementById('redraw').checked) { 
    chart.events = [ slideEvt.value ]; 
    chart.redraw(); 
} 

संपादित करें:

जोड़ा एक chart.quickRedraw कार्य करते हैं। यह redraw समारोह से अनावश्यक recalculations को हटा (जो अब बाहर रखा गया है के लिए कोड बाहर टिप्पणी की को देखें):

chart.quickRedraw = function() { 
     this.raphael.clear(); 
     //this._calc(); 
     this.drawGrid(); 
     //this.drawGoals(); 
     this.drawEvents(); 
     this.draw();  
}; 

डेमो तीसरे विकल्प के साथ अद्यतन किया गया है।

// Chart creation - not interesting 
 
var chart = new Morris.Line({ 
 
    element: 'chart', 
 
    ymin: 0, 
 
    ymax: 100, 
 
    gridIntegers: true, 
 
    parseTime:false, 
 
    // Will be set below 
 
    data: [ ], 
 
    xkey: 'position', 
 
    ykeys: ['value'], 
 
    labels: ['Value'], 
 
    hideHover: "always", 
 
    pointSize: 0, 
 
    continuousLine: false, 
 
    goalStrokeWidth: 3, 
 
    axes: true, 
 
    grid: true, 
 
    numLines: 6, 
 
    eventLineColors: [ "red" ], 
 
    smooth: true 
 
}); 
 

 
// Inserting some values 
 
var values = [101] 
 
for(i = 1; i <= 100; i += 1) { 
 
    var x = 100/(Math.pow((i-50), 2)+4); 
 
    values.push({ position: i, value: x }); 
 
} 
 
chart.setData(values); 
 

 
// Create slider 
 
$('#slider').slider({ 
 
    tooltip: 'never', 
 
    tooltip_position:'left', 
 
    height: 300, 
 
    length: 300, 
 
}); 
 

 
// If the slider moves, I want to set its value as an event-line 
 
$("#slider").on("slideStop", function(slideEvt) { 
 
    chart.options.events = [ slideEvt.value ]; 
 

 
    // Check inserting-data VS chart.redraw() 
 
    // Both should work... chart.redraw() isnt. 
 
    if(document.getElementById('insert').checked) 
 
     chart.setData(chart.options.data); 
 
    else if(document.getElementById('redraw').checked) { 
 
     chart.events = [ slideEvt.value ]; 
 
     chart.redraw(); 
 
    } else if(document.getElementById('quickerRedraw').checked) { 
 
     chart.events = [ slideEvt.value ]; 
 
     chart.quickRedraw(); 
 
    } 
 
}); 
 

 
chart.quickRedraw = function() { 
 
     this.raphael.clear(); 
 
     //this._calc(); 
 
     this.drawGrid(); 
 
     //this.drawGoals(); 
 
     this.drawEvents(); 
 
     this.draw(); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> 
 
<script src="http://cdn.oesmith.co.uk/morris-0.5.1.min.js"></script> 
 
<link href="http://cdn.oesmith.co.uk/morris-0.5.1.css" rel="stylesheet"/> 
 

 
<!-- Bootstrap slider --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.min.css"> 
 

 
<div id="chart" style="height: 150px;width:500px;"></div> 
 
<form action=""> 
 
    <input checked="true" id="insert" type="radio" name="refreshMethod"> Insert (working)<br> 
 
    <input id="redraw" type="radio" name="refreshMethod"> Redraw (working)<br> 
 
    <input id="quickerRedraw" type="radio" name="refreshMethod"> Quicker Redraw<br> 
 
</form> 
 
<input id="slider" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50"/>