有没有办法改变使用Highcharts拖动的步长 . 例如,当我有大数值的数据(成千上万)时,拖动值并得到像4327这样的随机数是非常不干净的 . 我希望能够做的是将拖动值四舍五入到某个点基于y-scale的最大值,但我无法弄清楚如何做到这一点 . 因此在这种情况下,拖动将从4300变为4400,而不是在中间获取随机数 . 这是一个JS小提琴,演示了拖动时我得到的不必要的数字:
var planChart;
$(function () {
planChart = {
chart: {
animation: false
},
title: {
text: ''
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true,
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: '#20709e'
}
},
title: {
text: 'title',
style: {
color: '#20709e'
}
},
}],
plotOptions: {
series: {
point: {
events: {
drag: function (e) {
// Returning false stops the drag and drops. Example:
/*
if (e.newY > 300) {
this.y = 300;
return false;
}
*/
},
drop: function () { }
}
},
stickyTracking: false
},
column: {
stacking: 'normal'
},
line: {
cursor: 'ns-resize'
}
},
tooltip: {
shared: true
},
credits: {
enabled: false
},
series: [{
name: 'title',
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.y} </b>
'
},
data: [7042, 40494, 48204, 20383, 20938, 4803, 23903, 22, 23939, 13032, 1332, 93932],
//draggableX: true,
draggableY: true,
dragMinY: 0,
style: {
color: '#20709e'
}
}]
}
$('.actualPlansPlot').highcharts(planChart);
});
$(document).on('click', '#updateYScale', function(e) {
var yValue = $('#newYValue')[0].value;
planChart.yAxis[0].max = yValue;
$('.actualPlansPlot').highcharts(planChart);
})
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="https://rawgithub.com/highslide-software/draggable-points/master/draggable-points.js?1"></script>
<div class="actualPlansPlot" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<input id="newYValue" type="number" />
<button id="updateYScale">Update Scale</button>
任何帮助将不胜感激!
2 回答
这个怎么样?
JSFiddle
如果您需要更改某个点的值,则可以更改draggable-points插件的
filterRange
函数来过滤点值 . 例如 . 添加dragPrecision
选项将更改返回的点值 .JSFiddle:http://jsfiddle.net/x8wbn5no/
其他方式,不需要编辑插件,是通过包装
Point.prototype.update
函数来改变Highcharts中点的更新工作方式 .JSFiddle:http://jsfiddle.net/sdvswdsw/