Charts Chart.js如何在多条形堆叠图表上显示多个标签

如何在每列下显示不同的标签，并为整个组显示另一个标签

正如你在下面的图片中看到的，我想为每一列使用图标，但为主组使用另一个标签。我找到了如何使用fa图标的其他答案，但不知道如何在每个栏下定位它们

连接不同列的趋势线并不重要，但如果我能找到如何添加它们，那就太好了

此外，图表需要滚动，因为它可以容纳大量的数据和标签需要显示。我还发现了一些带有scroll的示例

任何信息都非常感谢。或者有没有其他开源图表框架，我可以在其中实现这个或类似的东西来满足我的需要

---

使用谷歌图表…

在图表的

'ready'

事件中，
您可以使用图表方法-->

getChartLayoutInterface（）

该接口有一个方法-->

getBoundingBox（）

它将返回请求的图表元素的位置
要获得酒吧的位置

var barBounds = chartLayout.getBoundingBox('bar#0#0');

其中第一个

#0

是序列，第二个是行，

“bar#0#0”

将获得第一行的第一个bar

我们还可以得到轴标签的位置

var labelBounds = chartLayout.getBoundingBox('hAxis#0#label#0');

我们可以使用条和标签边界的组合来定位图标
我们想要条上的

左

位置，以及标签上的

顶部

位置

请参阅以下工作片段，
列属性用于存储图标名称，
x轴标签用于组
图标就位后，将向下移动轴标签以腾出空间

google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
var data=new google.visualization.DataTable({
科尔斯：[
{label:'x'，type:'string'}，
{标签：'file'，类型：'number'，p:{图标：'fa file'}，
{标签：'database'，类型：'number'，p:{图标：'fa database'}，
{label:'random'，type:'number'，p:{icon:'farandom'}，
],
行：[
{c:[{v:'Label 1'}，{v:11}，{v:6}，{v:15}]}，
{c:[{v:'Label 2'}，{v:8}，{v:null}，{v:12}]}，
{c:[{v:'Label 3'}，{v:6}，{v:8}，{v:18}]}，
{c:[{v:'Label 4'}，{v:null}，{v:1}，{v:16}]}，
]
});
变量选项={
酒吧：{
groupWidth:'50%'，
宽度：20
},
颜色：['#ffc107'、'#d32f2f'、'#00bcd4']，
身高：600，
图例：“无”，
标题：“能力”，
宽度：1000，
};
var container=document.getElementById（'chart_div'）；
var chart=新的google.visualization.ColumnChart（容器）；
google.visualization.events.addListener（图表'ready'，函数（）{
//初始化边界变量
var axisLabels=container.getElementsByTagName（'text'）；
var chartLayout=chart.getChartLayoutInterface（）；
var chartBounds=chartLayout.getChartAreaBoundingBox（）；
var containerBounds=container.getBoundingClientRect（）；
var labelIndex；
//添加图标
对于（var r=0；r
i{
颜色：#00bcd4；
}
使用谷歌图表…

在图表的
'ready'
事件中，

您可以使用图表方法-->
getChartLayoutInterface（）

该接口有一个方法-->
getBoundingBox（）


它将返回请求的图表元素的位置

要获得酒吧的位置

var barBounds = chartLayout.getBoundingBox('bar#0#0');

其中第一个
#0
是序列，第二个是行，

“bar#0#0”
将获得第一行的第一个bar

我们还可以得到轴标签的位置

var labelBounds = chartLayout.getBoundingBox('hAxis#0#label#0');

我们可以使用条和标签边界的组合来定位图标

我们想要条上的
左
位置，以及标签上的
顶部
位置

请参阅以下工作片段，

列属性用于存储图标名称，

x轴标签用于组

图标就位后，将向下移动轴标签以腾出空间


google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
var data=new google.visualization.DataTable({
科尔斯：[
{label:'x'，type:'string'}，
{标签：'file'，类型：'number'，p:{图标：'fa file'}，
{标签：'database'，类型：'number'，p:{图标：'fa database'}，
{label:'random'，type:'number'，p:{icon:'farandom'}，
],
行：[
{c:[{v:'Label 1'}，{v:11}，{v:6}，{v:15}]}，
{c:[{v:'Label 2'}，{v:8}，{v:null}，{v:12}]}，
{c:[{v:'Label 3'}，{v:6}，{v:8}，{v:18}]}，
{c:[{v:'Label 4'}，{v:null}，{v:1}，