charts - 在 Chart.js 中的图表内显示标签的总计(或简单地显示一个字符串)
问题描述
在 Chart.js 上,我需要在条形图(而不是每个条形图)上显示一些文本(例如该标签数据的总数)。例如,假设这几个月有一些吃披萨的人和吃汉堡的人超过 x 个月的数据。现在我想显示每个月吃披萨和汉堡的人的总和(在下面的例子中 1100 和 1300)。我怎样才能在一个月的中间写点东西?
1100 | 1300 |
_ | _ _ |
_ | | | | | | | |
| | | | | | | | | |
| | | | | | | | | |
January | February |
解决方案
我设法解决了它。可以使用名为chartjs 注释的外部插件来做到这一点
annotation: {
// Should be one of: afterDraw, afterDatasetsDraw, beforeDatasetsDraw
drawTime: 'afterDatasetsDraw', // (default)
annotations: [
{
type: 'line',
mode: 'vertical',
scaleID: 'x-axis-0',
value: 'January',
borderColor: 'transparent',
borderWidth: 0,
label: {
backgroundColor: 'rgba(0,0,0,0.8)',
fontSize: 10,
fontStyle: "bold",
fontColor: "#fff",
xPadding: 6,
yPadding: 6,
cornerRadius: 6,
position: "center",
xAdjust: 0,
yAdjust: -80,
enabled: true,
content: "Totals etc"
}
}
]
}
推荐阅读
- node.js - Node JS Sequelize 无法连接到 Azure SQL 数据库
- javascript - 如何通过javascript在html中创建/获取自定义属性元素?
- python - 在 python 中,UnicodeEncodeError: 'ascii' codec can't encode characters in position 15-18: inal not in range(128)
- python - 如何找到最大值。字符串中的相对频率,python?
- c++ - 为什么我的 c++ 程序崩溃了。我是平衡括号的实现问题
- php - 如何设置 Gsuite smtp-relay 和 PHPMailer
- python - 如何将模型的当前行复制到 Django 中的其他行?
- java - Java - 如何迭代 json 对象键和值对?
- r - 如何从 R 中的每日数据中的累积数字中获取实际值
- python - 在python中的两个单独字典中搜索键值对