在 Highcharts 中如何保持矩形这样的 SVG 元素在调整大小时，重排，重绘，放大时附加到系列数据而不是像素？

Question

你可以看到在我改变浏览器的大小后，系列数据绘图可以很好地自动调整大小，但是矩形 SVG 元素只是与 windows,

中的像素位置保持联系

这太荒谬了，所以现在我必须通过 toPixels 函数在一些调整大小重绘、缩放事件处理程序和 bla bla bla 中一次又一次地重新分配这个 svg 的像素值（不清楚它会处理多少场景),

是否有任何设置让矩形这样的 SVG 元素与系列数据和 x 轴索引号绑定而不与像素绑定？

我期望的是，无论你调整大小、重排、放大或缩小，矩形这样的 SVG 元素都只带有 x 轴索引号和系列数据 y。即，自动重新定位，自动调整大小伴随x轴索引号和系列数据y

我就是不明白为什么Highcharts SVG要这么设计，很麻烦，和matplotlib等传统的绘图模块比起来真的很不爽。谢谢！

before resizing

not ok after resizing

highcharts-area css

highcharts-graph css

highcharts-tracker css

Answer 1

您的要求基本上是让红色矩形表现得像一个系列（就响应能力而言）。

Highcharts 提供 polygon 类型的系列，如果您不需要圆角（多边形不支持圆角），这将是一个很好的解决方案。

似乎风格适当的 columnrange 系列完成了工作（感谢 borderRadius 属性）：

{
    groupPadding: false,
    pointPadding: 0,
    borderRadius: 10,
    showInLegend: false,
    borderColor: 'red',
    borderWidth: 2,
    color: 'none',
    type: 'columnrange',
    pointRange: 4,
    data: [{
      x: 3,
      low: 1,
      high: 24,
    }]

pointRange 双向工作，因此如果它等于 4 并且 x 等于 3，则该列将从 1 跨越到 5。groupPadding: false 和 pointPadding: 0 导致矩形表示精确值。

现场演示： http://jsfiddle.net/BlackLabel/gd0v9Lop/

API参考：https://api.highcharts.com/highcharts/s

在 Highcharts 中如何保持矩形这样的 SVG 元素在调整大小时，重排，重绘，放大时附加到系列数据而不是像素？

In Highcharts How to keep rectangle such SVG elements attached with series data but not with pixel when resize,reflow,redraw,zooming in out?

binding

svg

axis

rectangles

highcharts