Question

场景：我需要绘制一个具有背景图像的图。根据该图像上的信息，必须存在可以随时间推移而移动的多个原点（我们称其为“目标”）。这些目标的运动将必须由箭头/矢量指示，其中第一个矢量起源于目标的位置，第二个矢量起源于先前矢量结束的位置，依此类推。

结果应类似于以下内容：

在尝试实现这一目标时，我偶然发现了不同的问题：

我将使用带有组合序列的图表：散点图，将目标添加到准确的x / y位置；向量图，以插入向量。这是正确的方法吗？
由于我想将每个向量的起点都设置为精确的x / y坐标，因此我使用rotationOrigin: 'start'。当我现在将vectorLength更改为20以外的值时，矢量仍然偏移了10个像素（http://jsfiddle.net/Chop_Suey/cx35ptrh/）对我来说似乎是个错误。它可以修复还是有解决方法？
当我定义矢量时，它看起来像[x, y, length, direction]。但是length是一个相对单位，它是相对于最长矢量（默认情况下为20（像素））或我将vectorLength设置为任何值的某种魔术而计算出来的。因此，矢量未连接，并且它们之间的间距根据图大小轴（最小/最大）而变化。我实际上想用绘图轴来计算长度（由于x轴和y轴可能具有不同的比例，这可能很棘手）。一种解决方法是添加一个重绘事件并在每次调整大小时重新计算向量，并将vectorLength设置为当前最长的向量（可以再次将其计算为与轴相关）。这非常麻烦，我希望能够像[x1, y1, x2, y2]这样设置矢量，其中（x1 / y2）表示矢量的起点，而（x2 / y2）表示矢量的终点。这有可能吗？有什么建议吗？
由于背景图像不仅是装饰，而且与所显示的数据相关，因此在我放大时应该更改它。是否可以将背景图像“锁定”到原始图的最小值/最大值，以便当放大，背景图像也会放大（图像质量无关紧要）？

Answer 1

将这两个序列组合在一起根本不会有问题，这将是正确的方法，但是有必要稍微改变一下原型函数，因为矢量将以不同的方式绘制。这是示例：https://jsfiddle.net/6vkjspoc/
此模块中可能存在错误，我们将尽快将其报告为新问题。但是，我们为此做出了解决方法（或修复），现在它可以正常工作，在上面的示例中您可以注意到。

向量长度当前是使用小数位计算的，即-如果vectorLength的值等于100（例如），并且向量序列具有如下所示的两个点：

{
  type: 'vector',
  vectorLength: 100,
  rotationOrigin: 'start',
    data: [
      [1, 50000, 1, 120],
      [1, 50000, 2, -120]
    ]
}

然后取所有点中最高的length并基于此为每个点计算比例，因此第一个length等于50，因为算法为point.length / lengthMax ，您可以从下面的代码中推断出什么：

  H.seriesTypes.vector.prototype.arrow = function(point) {
    var path,
    fraction = point.length / this.lengthMax,
    u = fraction * this.options.vectorLength / 20,
    o = {
      start: 10 * u,
      center: 0,
      end: -10 * u
    }[this.options.rotationOrigin] || 0;

    // The stem and the arrow head. Draw the arrow first with rotation 0,
    // which is the arrow pointing down (vector from north to south).
    path = [
      'M', 0, 7 * u + o, // base of arrow
      'L', -1.5 * u, 7 * u + o,
      0, 10 * u + o,
      1.5 * u, 7 * u + o,
      0, 7 * u + o,
      0, -10 * u + o // top
    ];

    return path;
  }

关于用两个x，y值定义向量的开始和结束的问题，您需要重构整个序列代码，这样它就不会像比例尺那样完全使用vectorLength，因为您将定义点的长度。我怀疑这将是一个非常复杂的解决方案，因此您可以尝试自己动手做，并让我知道结果。

为了使其起作用，您需要在vectorLength处理函数中重新计算和更新向量序列的chart.events.selection。这是示例：https://jsfiddle.net/nh7b6qx9/

具有绝对长度的连接向量的Highcharts向量图

1 个答案: