Javascript 堆积条形图内部的条形图
我想显示以下图表: 许多图表库允许使用堆叠条形图,例如:Javascript 堆积条形图内部的条形图,javascript,d3.js,charts,chartist.js,Javascript,D3.js,Charts,Chartist.js,我想显示以下图表: 许多图表库允许使用堆叠条形图,例如: 等等 但是像上面所示的图表怎么样?其想法是为绿色、黄色和红色区域以及中间的黑色条提供值。。。应根据这些值绘制此类图表 我认为这可以通过创建一个堆叠条形图并“以某种方式”将条形插入堆叠条形图中来实现。。。然后“不知何故”把标签贴在那里…:D 如你所见,一点线索也没有……:) 你是说像这样的子弹图吗 `data:[ { type: "stackedBar100", toolTipContent: null,
- 等等
`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:[{}]
}
] `
你是说像这样的子弹图吗
`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:[{}]
}
] `
创建一个具有相对位置的图表包装容器,然后在该容器中添加两个具有绝对位置的图表。实际上,您甚至不需要具有这些位置的容器。您可以使用D3比例在SVG中定位这两个图表。只需先绘制堆叠条形图,然后绘制常规条形图。在SVG中,以后绘制的内容都保留在顶部。创建一个具有相对位置的图表包装容器,然后在该容器中添加两个具有绝对位置的图表。实际上,您甚至不需要具有这些位置的容器。您可以使用D3比例在SVG中定位这两个图表。只需先绘制堆叠条形图,然后绘制常规条形图。在SVG中,以后绘制的内容将保留在顶部。