Javascript Chart.js堆叠和分组水平条形图

我一直试图在我的网页上显示一些复杂的数据，并选择了chart.js。 因此，我需要将多个堆叠的钢筋水平分组

我已经为“普通”酒吧找到了这把小提琴，但还不能完全改变它来使用水平酒吧

问题:

原来的Fiddle（）是

我只是用.horizontalBar替换了代码中所有的.bar（很清楚这不会成功）

由于这不太有效，我尝试添加第二个堆叠修改器，建议在此处添加水平条： 并翻转用于X和Y计算的函数（calculateBarY/calculateBarX）

这也很有效，因为堆栈不能正确地相互合并

---

如果有人能在这个问题上帮助我，我将不胜感激。

为了寻找类似的东西，我看了一下你们给出的例子，决定写点东西

我从

Chart.controllers.horizontalBar

获取

Chart.js

代码，并重写函数

calculateBarY

，

calculateBarehight

中的某些部分，而不是试图修复代码或重用“groupableBar”。 只是重用了示例中的

getBarCount

函数

Chart.defaults.groupableHBar=Chart.helpers.clone（Chart.defaults.horizontalBar）；
Chart.controllers.groupableHBar=Chart.controllers.horizontalBar.extend({
calculateBarY：函数（索引、数据集索引、标尺）{
var me=这个；
var meta=me.getMeta（）；
var yScale=me.getScaleForId（meta.yAxisID）；
var barIndex=me.getBarIndex（数据集索引）；
var topTick=yScale.getPixelForValue（null，index，datasetIndex，me.chart.isCombo）；
topTick-=me.chart.isCombo？（标尺.tickHeight/2）：0；
var stackIndex=this.getMeta（）.stackIndex；
if（yScale.options.stacked）{
如果（标尺数据集计数>1）{
var spBar=ruler.categoryspace/ruler.datasetCount；
var h=me.CalculateBarehight（标尺）；
返回topTick+（（ruler.categoryHeight-h）/2）+ruler.categoryspace spBar/2）+（h+spBar）*stackIndex；
}
返回topTick+（ruler.categoryHeight/2）+ruler.categoryspace；
}
返回topTick+
（标尺高度/2）+
标尺类别间距+
（标尺高度*barIndex）+
（标尺间距/2）+
（标尺间距*barIndex）；
},
CalculateBarehight:函数（标尺）{
返回的var=0；
var me=这个；
var yScale=me.getScaleForId（me.getMeta（）.yAxisID）；
if（yScale.options.barThickness）{
返回=yScale.options.barThickness；
}
否则{
返回=yScale.options.stacked？标尺.categoryHeight:标尺.barHeight；
}
如果（标尺数据集计数>1）{
returned=returned/ruler.datasetCount；
}
返回；
},
getBarCount:函数（）{
var堆栈=[]；
//将堆栈索引放入数据集元数据中
Chart.helpers.each（this.Chart.data.datasets，function（dataset，datasetIndex）{
var meta=this.chart.getDatasetMeta（datasetIndex）；
if（meta.bar&&this.chart.isDatasetVisible（datasetIndex））{
var stackIndex=stacks.indexOf（dataset.stack）；
如果（stackIndex==-1）{
stackIndex=stacks.length；
stacks.push（dataset.stack）；
}
meta.stackIndex=stackIndex；
}
}，这个）；
this.getMeta（）.stacks=stacks；
返回长度；
}
});
风险值数据={
标签：[“一月”、“二月”、“三月”]，
数据集：[
{
标签：“狗”，
背景色：“rgba（255,0,0,0.2）”，
数据：[20,10,25]，
堆栈：1，
xAxisID:'x轴-0'，
yAxisID:'y轴-0'
},
{
标签：“猫”，
背景色：“rgba（255255,0,0.2）”，
数据：[70,85,65]，
堆栈：1，
xAxisID:'x轴-0'，
yAxisID:'y轴-0'
},
{
标签：“鸟类”，
背景色：“rgba（0255255,0.2）”，
数据：[10,5,10]，
堆栈：1，
xAxisID:'x轴-0'，
yAxisID:'y轴-0'
},
{
标签：“：-）”，
背景色：“rgba（0255,0,0.2）”，
数据：[20,10,30]，
堆栈：2，
xAxisID:'x轴-1'，
yAxisID:'y轴-0'
},
{
标签：“：-|”，
背景色：“rgba（0,0255,0.2）”，
数据：[40,50,20]，
堆栈：2，
xAxisID:'x轴-1'，
yAxisID:'y轴-0'
},
{
标签：：-（“，
背景色：“rgba（0,0,0,0.2）”，
数据：[60,20,20]，
堆栈：2，
xAxisID:'x轴-1'，
yAxisID:'y轴-0'
},
]
};
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
新图表（ctx{
键入：“groupableHBar”，
数据：数据，
选项：{
比例：{
雅克斯：[{
对,，
类型：'类别'，
id:'y轴-0'
}],
xAxes：[{
对,，
类型：'线性'，
滴答声：{
贝吉纳泽罗：是的
},
网格线：{
显示：假，
没错，
},
id:'x轴-0'
},
{
对,，
位置：'顶部'，
类型：'线性'，
滴答声：{
贝吉纳泽罗：是的
},
id:'x轴-1'，
网格线：{
显示：对，
没错，
},
显示：假
}]
}
}
})；

---

为了寻找类似的东西，我看了一下您给出的示例，并决定写一些东西

我从

Chart.controllers.horizontalBar

获取

Chart.js

代码，并重写函数

calculateBarY

，中的某些部分，而不是试图修复代码或重用“groupableBar”

Chart.defaults.groupableBar = Chart.helpers.clone(Chart.defaults.bar);

Chart.defaults.groupableBar = Chart.helpers.clone(Chart.defaults.horizontalBar);