堆积条形图中的条形图答案

【问题标题】：Bar Chart inside Stacked Bar Chart堆积条形图中的条形图
【发布时间】：2017-10-14 07:32:51
【问题描述】：

我想显示如下图表：

许多图表库允许使用堆积条形图，例如：

但是如上所示的图表呢？我们的想法是为绿色、黄色和红色区域以及中心的黑条提供值...应该根据这些值呈现这样的图表。

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

如你所见，一点头绪都没有……:)

【问题讨论】：

创建一个具有相对定位的图表包装容器，然后在该容器中添加两个具有绝对定位的图表。
实际上，您甚至不需要那些具有这些位置的容器。您可以仅使用 D3 比例在 SVG 中定位这两个图表。只需先绘制堆积条形图，然后再绘制常规条形图。在 SVG 中，以后绘制的内容都保留在顶部。

标签： javascript d3.js charts chartist.js

【解决方案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:[{}]
  }

  ] `

【讨论】：