javascript - Highcharts:移动渲染器(自定义绘制)

Question

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

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

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

http://jsfiddle.net/n2549ewg/1/

 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/

正如您在示例中看到的，缩放时矩形也会变大。如果您想避免这种行为，请保持宽度和高度不变。矩形将调整位置，但它们的大小将保持不变。

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