javascript - highchart 柱形比较图，如 xrange

Question

对于每个日期，我有 4 个值要比较并想要实现

我最好的尝试 - 分散 jsfiddle

Highcharts.chart('container', {
  chart: {
    type: 'scatter',
    zoomType: 'xy'
  },
  series: [{
    "name": "master-A",
    "color": "#29CC5F",
    "data": [
      [1615680000000, 200],
      [1615766400000, 210],
      [1615852800000, 220],
      [1615939200000, 210],
    ]
  }, {
    "name": "release-A",
    "color": "#999999",
    "data": [
      [1615680000000, 100],
      [1615766400000, 110],
      [1615852800000, 120],
      [1615939200000, 110],
    ]
  }, {
    "name": "master-B",
    "color": "#198CFF",
    "data": [
      [1615680000000, 300],
      [1615766400000, 310],
      [1615852800000, 320],
      [1615939200000, 310],
    ]
  }, {
    "name": "release-B",
    "color": "#CCC796",
    "data": [
      [1615680000000, 400],
      [1615766400000, 410],
      [1615852800000, 420],
      [1615939200000, 410],
    ]
  }]
});

标签： javascripthighcharts

Answer 1

您可以使用具有定义的自定义形状的散点系列。例子：

// Define a custom symbol path
Highcharts.SVGRenderer.prototype.symbols.rectangle = function(x, y, w, h) {
    return ['M', x - 2 * w, y, 'L', x + 3 * w, y, x + 3 * w, y + h, x - 2 * w, y + h, 'z'];
};
if (Highcharts.VMLRenderer) {
    Highcharts.VMLRenderer.prototype.symbols.cross = Highcharts.SVGRenderer.prototype.symbols.cross;
}

---

现场演示： https ://jsfiddle.net/BlackLabel/bod4t0cf/

API 参考： https ://api.highcharts.com/highcharts/series.scatter.marker.symbol