HTML in Chart.js labels(Chart.js 标签中的 HTML)
本文介绍了Chart.js 标签中的 HTML的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在我的图表标签中添加一些图片和/或链接.这是示例代码和 jsFiddle:
var 数据 = {标签:['一月','<s>二月</s>','<img src="http://jsfiddle.net/favicon.png">','<a href="http://jsfiddle.net/>A 链接</a>'],数据集:[{数据:[65、59、90、81]}]}var ctx = document.getElementById(myChart").getContext(2d");var myNewChart = new Chart(ctx).Bar(data);
jsFiddle 链接
如您所见,HTML 未在标签内解析.有没有办法在图表的标签中添加有效的图像和/或链接?
解决方案
看Chart.js 源代码 似乎标签是使用 fillText
命令.fillText(text, x, y [, maxWidth])
只接受纯文本字符串,因此您的 HTML 字符串将呈现为纯文本,所有标签都将被忽略.
一种可能的选择是考虑修改 Chart.js 代码以使用 <foreignObject>
(请参阅 这篇文章在 MDN 和 this 它所基于的).例如:
ctx.translate(xPos,(isRotated) ? this.endPoint + 12 : this.endPoint + 8);ctx.rotate(toRadians(this.xLabelRotation)*-1);var 数据 = 数据:图像/svg+xml",+"
沃梦达教程
本文标题为:Chart.js 标签中的 HTML
基础教程推荐
猜你喜欢
- Chart.js 在线性图表上拖动点 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 直接将值设置为滑块 2022-01-01