Javascript 将HTML添加到条形图的标签-chart js

我使用图表js来显示条形图。它在正常情况下正常工作，但我愿意更改颜色或标签的一小部分，即，我想在条形图的标签上包含一些HTML。但是，它不是呈现HTML，而是显示纯HTML文本

如果这是不可能的，这是好的，我如果有另一种方法来实现这一点，比如，改变价格的颜色，保持名称不变

让$js_dom_数组=[“43.28”，“93.13”]；
让$js_am_label_arr=[“$0无”，“$23.63无障碍”]；
设ctx2=document.getElementById（“条形图”）.getContext（“2d”）；
让图表=新图表（ctx2{
类型：'bar'，
数据：{
标签：$js_am_label_arr，
数据集：[{
标签：“设施名称”，
数据：$js_dom_数组，
背景颜色：“rgba（26179148,0.5）”，
边框颜色：“rgba（75192192,1）”，
边框宽度：1
}]
},
选项：{
回答：是的，
维护Aspectratio：是的，
legendCallback:函数（图表）{
var text=[]；
就我所知，做你想做的事是不可能的。
在当前版本（v2.9.3）中，甚至不可能更改“特定X记号”标签的颜色，您只能通过以下方式更改每个标签的颜色：

选项：{
比例：{
雅克斯：[{
滴答声：{
fontColor:“红色”，
}
}],
xAxes：[{
滴答声：{
fontColor:“红色”，
}
}]
}
}

v2.6.0版有一个变通方法（当您标记此版本时，我想您正在使用它），您可以将一组颜色传递给
fontColor
，例如：
fontColor:[“红色”、“绿色”]
，但您需要更改chartjs的一些代码行，但无法根据需要仅更改axis tick label文本的特定部分

如果您对此解决方案感兴趣，可以在此处查看

但同样，这个解决方案与较旧版本的chartjs有关，我不知道您在这里丢失了哪些功能

看起来它可以在3.0版中更改每个刻度的颜色，但是这个版本还没有发布

已更新

我在这里用c3/d3 js做了一个简单的例子。但它有一些要点：

显示图表时更新的标签需要一点时间
在changeTickLabel上，我做了一个硬代码来检查值，然后附加文本（比如“Disability Accessible”）。所以在这里，您需要找到更适合您的逻辑

var图表=c3.generate({
onrendered:function（）{changeTickLabel（）}，
数据：{
栏目：[
[data1'，43.28，93.13]
],
类型：'bar'，
},
轴线：{
x:{
类型：'类别'，
类别：[“$0”，“$23.63”]，
勾选：{
多行：false，
挑选：{
最高：1
},
},
},
}
});
函数changeTickLabel（）{
d3.选择全部（'.c3-轴-x.勾选tspan'）
.每个（功能（d，i）{
var self=d3.选择（此项）；
var textValue=self.text（）；
如果（textValue！='$0'）{
自我风格（“填充”、“红色”）；
self.append（'tspan'）。样式（“填充”、“黑色”）。文本（'disability Accessible'）；
}
否则{
self.append（'tspan'）.text（'None'）；
}  
});
}
您可以在将标签悬停时使用

将鼠标移到横杆上


让$js_dom_数组=[43.28,93.13]；
让$js_am_label_arr=[“$0”，“$23.63”]；
设ctx2=document.getElementById（“条形图”）.getContext（“2d”）；
让图表=新图表（ctx2{
类型：'bar'，
数据：{
标签：$js_am_label_arr，
数据集：[{
背景颜色：“rgba（26179148,0.5）”，
标签：“设施名称”，
数据：$js_dom_数组，
}]
},
选项：{
回答：是的，
维护Aspectratio：是的，
工具提示：{
启用：对，
回调：{
labelTextColor:函数（工具提示项、图表）{
如果（tooltipItem.index==1）
返回“红色”；
}
}
},
比例：{
xAxes：[{
错,，
贝吉纳泽罗：是的，
滴答声：{
步长：1，
分:0,，
autoSkip:错误，
fontColor:“红色”，
回调：函数（标签、索引、标签）{
如果（/\s/.test（标签））{
返回标签。拆分（“”）；
}否则{
退货标签；
}
}
}
}]
}
}
})；
因为您对任何插件都是开放的，所以我建议您使用它来实现上述情况。在下面的演示代码中，我刚刚将标签值传递到xAxis中的
类别
，并对span标记做了一些更改。例如：我已将内联css添加到span中，您需要在其中显示红色

这是演示代码：


var图；
让$js_dom_数组=[43.28,93.13]；
让$js_am_label_arr=[“$0无”，“$23.63无障碍”]；
$（文档）.ready（函数（）{
图表=新的高点图表。图表({
图表：{
renderTo:'chart\u container'，//将显示chart\u container下的图表
defaultSeriesType:'条形'，//条形图
美国银行