chart.redraw() không hoạt động sau khi cài đặt event-line

Question

Tôi đang sử dụng biểu đồ morris.js cùng với thanh trượt bootstrap.

Những gì tôi muốn làm:
Nếu thanh trượt được di chuyển, tôi muốn chèn một sự kiện trực tuyến vào bảng xếp hạng ở vị trí của giá trị thanh trượt. Không có gì đặc biệt.

Sự cố:
Biểu đồ không được vẽ lại sau khi đặt sự kiện. Khi chèn dữ liệu mới, biểu đồ sẽ tự động được vẽ lại. Vì vậy, tôi đã cố gắng làm mới (để kiểm tra cú pháp đúng) bằng cách thông qua các dữ liệu hiện có để bảng xếp hạng một lần nữa như thế này:

chart.setData(chart.options.data); 

này đang làm việc! Sự kiện mới được đưa vào biểu đồ. Thật không may, điều này có hiệu suất kém khi biểu đồ đang vẽ lại tất cả dữ liệu.

Tài liệu cho biết có chart.redraw(). Nó không làm việc cho tôi. Có thể ai đó của bạn có thể tìm hiểu lý do.

Chỉ cần chạy đoạn mã và chuyển nút radio để kiểm tra cả hai phương pháp và bạn sẽ thấy sự cố.

// 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"/>

Tôi đánh giá cao sự giúp đỡ tất cả ở đây. Cảm ơn nhiều!

Chỉnh sửa quan trọng:
Ngay sau khi tôi có thể đặt tiền thưởng (+1 giờ), tôi sẽ làm như vậy. Một phần bổ sung rất quan trọng của câu hỏi này là làm thế nào để ràng buộc thanh trượt vào một sự kiện biểu đồ duy nhất mà không bị tụt hậu. Hiệu suất hiện tại rất thấp khi sử dụng sự kiện slide thay vì slideStop.

Answer 1

Nó không hoạt động vì nội bộ chart.events không được đặt khi bạn gọi chart.redraw(). Thuộc tính này được đặt bên trong setData với dòng this.events = this.options.events.

Để khắc phục cho điều này: Trong bạn sử dụng mã chart.events = [val] hơn chart.options.events = [val];

Cá nhân, tôi muốn cài đặt chúng cả trong trường hợp setData được gọi là một lần nữa, nhưng đó là tùy thuộc vào bạn.

Vì vậy, trong bản demo của bạn:

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

EDIT:

Added một chức năng chart.quickRedraw. Điều này loại bỏ tính toán lại không cần thiết khỏi chức năng vẽ lại (tham khảo mã đã nhận xét cho những gì hiện bị loại trừ):

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

Bản trình diễn đã được cập nhật với tùy chọn thứ ba.

// 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"/>