这种类型的图表有名称吗？可以使用图表引擎创建吗？

Question

几十年前，我在 20 世纪 80 年代写的一本汽车行业书籍中看到了这种图表，从那时起我就或多或少地对它们着迷，想知道如何动态创建类似的时间线。这对于我即将进行的爱好项目非常有用，因为我认为没有其他好方法可以完美地可视化此类数据。

附上一个简单的模型（实际上非常像图表应该看起来的样子），以及图表所基于的示例数据。

Y轴上的产品特性可以是很多东西，比如发动机功率、重量、体积、长度、最大速度，它是什么并不重要，我在这里只是将其命名为容量。但它需要在那里正确对齐图表上的产品，因此没有实际 Y 轴值的典型时间线不足以达到此目的。 我还认为这个问题可以通过仅标记数据系列或其他东西来解决，很抱歉不知道正确的术语。

所以，我主要想知道这个图表变体的名称以及网上是否有任何示例。我已经搜索过，但还没有真正找到我要找的东西。

其次，可以使用以下任何图表引擎来完成类似的事情： Google Charts、HighCharts、Chart.js、ApexCharts 或 Apache ECharts。

我正在考虑在 WordPress 上发布，但 MediaWiki 或其他一些流行平台也不是完全不可能。然而，解决这个图表挑战自然是第一步。 该项目将是社区的努力，但贡献者不必担心任何图表创建，只需输入表格数据即可。

我非常感谢任何可能的答案或提示。

Answer 1

您可以使用

columnrange

系列通过 Highcharts 库创建这样的图表。

Highcharts.chart('container', {
  chart: {
    type: 'columnrange',
    inverted: true
  },
  colors: ['black'],
  title: {
    text: 'Product evolution 1985 - 2000'
  },
  legend: {
    enabled: false
  },
  xAxis: {
    /* min: 50,
    max: 600, */
    tickInterval: 50,
  },
  data: {
    csv: document.getElementById('csv').innerHTML,
    seriesMapping: [{
      x: 0,
      low: 1,
      high: 2,
      label: 3
    }]
  },
  yAxis: {
    title: {
        text: ''
    }
  },
  tooltip: {
    useHTML: true,
    formatter: function() {
      const point = this;

      return `
        <div>
            <b>${point.point.label}</b><br/>
          Capacity: ${point.point.x}<br/>
          Range: ${point.point.low} - ${point.point.high}
        </div>
      `;
    }
  },
  plotOptions: {
    columnrange: {
        groupPadding: 0,
      pointPadding: 0,
      dataLabels: {
        enabled: true,
        inside: true,
        formatter: function(e) {
          if (e.align == "left") return this.point.label;
        }
      }
    }
  },
});

<script src="https://code.highcharts.com/11.3/highcharts.js"></script>
<script src="https://code.highcharts.com/11.3/highcharts-more.js"></script>
<script src="https://code.highcharts.com/11.3/modules/data.js"></script>

<div id="container"></div>
<pre id="csv" style="display:none">
Capacity, Released, Discontinued, Product
50,
100, 1986, 1994, AB 1
150, 1994, 1997, AC 1
200, 1988, 1994, AB 2
250, 1994, 1997, AC 2
300, 1989, 1991, BH 3
350, 1991, 1995, BK 3
450, 1995, 1999, CC 5
500, 1993, 1995, CB 5
600
</pre>

演示：https://jsfiddle.net/BlackLabel/4der19cw/
API：https://api.highcharts.com/highcharts/data