我正在使用 morris.js 图表和 Bootstrap slider 。
我想做什么:
如果移动了 slider ,我想在图表中 slider 值的位置插入一条事件线。没什么特别的。
问题:
设置事件后图表不会重绘。插入新数据时,图表会自动重新绘制。所以我尝试通过将现有数据再次传递给图表来刷新(以检查语法是否正确),如下所示:
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 小时),我就会这样做。这个问题的一个非常重要的附加部分是如何在不滞后的情况下将 slider 绑定(bind)到单个图表事件。当前使用 slide
事件而不是 slideStop
时性能非常低。
最佳答案
它不起作用,因为当您调用 chart.redraw()
时,内部 chart.events
没有设置。此属性在 setData
中使用 this.events = this.options.events
行设置。
要更正此问题:在您的代码中使用 chart.events = [val]
而不是 chart.options.events = [val];
就我个人而言,我会同时设置它们以防再次调用 setData
,但这取决于您。
所以在你的演示中:
...
else if(document.getElementById('redraw').checked) {
chart.events = [ slideEvt.value ];
chart.redraw();
}
编辑:
添加了一个 chart.quickRedraw
函数。这从重绘函数中删除了不必要的重新计算(请参阅注释掉的代码以了解现在排除的内容):
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"/>
关于javascript - 设置事件线后 chart.redraw() 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43184820/