javascript - 堆积条形图内的条形图

Question

我想显示以下图表:

许多图表库允许使用堆叠条形图，例如:

• Chartist.js
• d3.js
• CanvasJS
• 等等

但是像上面所示的图表怎么样？这个想法是为绿色、黄色和红色区域以及中心的黑色条提供值...基于这些值应该渲染这样的图表。

我认为这可以通过创建堆叠条形图并“以某种方式”将条形插入堆叠条形图内来实现......并“以某种方式”将标签放在那里......:D

如你所见，根本没有任何线索......:)

Answer 1

你的意思是workaround像这样的子弹图？

`data:[
  {
    type: "stackedBar100",
    toolTipContent: null,
    highlightEnabled: false,
    name: "Region 1",
    showInLegend: true,
    dataPoints: [
    {y: 60, label: "Water Filter" }

    ]
  },
   {
    type: "stackedBar100",
    toolTipContent: null,
    highlightEnabled: false,
    name: "Region 2",
    showInLegend: true,
    dataPoints: [
    {y: 20, label: "Water Filter" }

    ]
  },{
    type: "bar",
    dataPoints:[{}]

  },{
    type: "bar",
    dataPoints: [
    {y: 65, label: "Water Filter" }

    ]
  },
  {
    type: "bar",
    dataPoints:[{}]
  }

  ] `