我正在使用 highcharts 绘制 ~100,000 个点。
我想根据一些自定义数据在下面“绘制”各种矩形。本质上只是矩形的起始位置和长度。缩放后,矩形保持不变,不会“调整”。
我有一个简单的 fiddle ,但这里绘制的矩形只是一个小子集。
http://jsfiddle.net/n2549ewg/1/
chart.renderer.rect(x1, y2, x2 - x1, y1 - y2)
.attr({
fill: 'blue'
}).add();
有没有一种方法可以让所有自定义渲染器自动缩放? 一个有效的例子就太好了。
最佳答案
必须重新计算矩形的位置。您可以在重绘事件中执行此操作,但您需要在矩形创建期间使用的生成的随机数。
在循环中添加以下代码,每个矩形坐标将被保留。
rectangle = {
start: start,
len: len,
ystart: ystart,
yend: yend,
element: chart.renderer.rect(x1, y2, x2 - x1, y1 - y2)
.attr({
fill: 'blue'
}).add()
};
chart.rectangles.push(rectangle);
重绘时根据新比例重新计算它们的位置 - 缩放 x 和 y 轴后更改了它们的比例。
events: {
redraw: function() {
var xAxis = this.xAxis[0],
yAxis = this.yAxis[0];
this.rectangles.forEach(function (rect) {
var x1 = xAxis.toPixels(rect.start),
x2 = xAxis.toPixels(rect.len),
y1 = yAxis.toPixels(rect.ystart),
y2 = yAxis.toPixels(rect.yend);
rect.element.attr({
x: x1,
y: y2,
width: x2 - x1,
height: y1 - y2
});
});
}
示例:http://jsfiddle.net/n2549ewg/4/
正如您在示例中看到的,缩放时矩形也会变大。如果您想避免这种行为,请保持宽度和高度不变。矩形将调整位置,但它们的大小将保持不变。
关于javascript - Highcharts:移动渲染器(自定义绘制),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40726320/