highcharts 列比较图表，如 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],
    ]
  }]
});

Answer 1

要更改标记的形状，in the documentation of the highcharts API says关于使用图像。

引用：

Additionally, the URL to a graphic can be given on this form: 'url(graphic.png)'. Note that for the image to be applied to exported charts, its URL needs to be accessible by the export server.

链接的文档包含 jsfiddle 中可用的示例 - 请参阅 Predefined, graphic and custom markers。

Answer 2

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

// 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

highcharts 列比较图表，如 xrange

highchart column comparison chart like xrange

javascript

highcharts