Question

我使用highcharts绘制~100,000点。

我想根据一些自定义数据在下面绘制“绘制”各种矩形。基本上只是开始矩形的位置和长度。在缩放时，矩形保持不被“调整”。

我有一个简单的小提琴，但这里绘制的矩形是一个小子集。

 chart.renderer.rect(x1, y2, x2 - x1, y1 - y2)
                .attr({ 
                     fill: 'blue'
                 }).add();

是否有一种方法可以自动缩放所有自定义渲染器？一个工作的例子会很棒。

Answer 1

必须重新计算矩形的位置。您可以在重绘事件上执行此操作，但需要在矩形创建期间使用生成的随机数。

在循环内添加以下代码，并保留每个矩形坐标。

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/

正如您在示例中所看到的，缩放时rects也变得更大。如果要避免该行为，请保持宽度和高度不变。 rects将调整位置，但其大小将保持不变。

示例：http://jsfiddle.net/n2549ewg/5/

Highcharts：移动渲染器（自定义绘制）

1 个答案: