chart.js - ChartJS 多个 X 轴和 y 轴上的额外标签
问题描述
我有一张使用 ChartJS 最新版本 3.3.2 的图表。我的代码如下:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>OCA-Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js"></script>
</head>
<body>
<canvas id="chartJSContainer"></canvas>
<script>
const labels = ["A","B","C","D","E","F","G","H","I","J"];
const data = {
labels: labels,
datasets: [
{
label: 'Dataset 1',
data: [-92, -100, -99, -86, 8, 56, -94, -89, -92, -24],
borderColor: 'transparent',
backgroundColor: 'transparent',
order: 1
},
{
label: 'Dataset 2',
data: [-92, -100, -99, -86, 8, 56, -94, -89, -92, -24],
borderColor: 'black',
backgroundColor: 'blue',
type: 'line',
order: 0
}
]
};
const config = {
type: 'bar',
data: data,
options: {
responsive: true,
plugins: {
legend: {
display: false
},
title: {
display: false
}
},
scales: {
y: {
min: -100,
max: 100
}
}
}
};
var chart = new Chart(document.getElementById('chartJSContainer'), config);
</script>
</body>
</html>
如何在图表顶部添加相同的 x 轴标签并在图表左侧添加新标签。见附件捕获。谢谢。
解决方案
对于顶部的 X 轴,您只需添加另一个 X 轴并将位置设置为顶部,对于 Y 轴之间的标签,最好为此编写一个自定义插件。
例子:
var options = {
type: 'line',
data: {
labels: ["A", "B", "C", "D", "E", "F"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1
}
]
},
options: {
scales: {
x: {
position: 'bottom',
grid: {
offset: true // offset true to get labels in between the lines instead of on the lines
}
},
x2: {
position: 'top',
grid: {
offset: true // offset true to get labels in between the lines instead of on the lines
}
},
y: {
ticks: {
count: (context) => (context.scale.chart.data.labels.length + 1)
}
}
},
plugins: {
labelsY: {
font: 'Arial',
size: '14px',
color: '#666',
align: 'right',
reverseLabels: false // true to make A start at top and F at bottom
}
}
},
plugins: [{
id: 'labelsY',
afterDraw: (chart, args, options) => {
const {
ctx,
scales: {
y,
x
},
data: {
labels
}
} = chart;
let dupLabels = JSON.parse(JSON.stringify(labels)); // remove pointer to internal labels array so you dont get glitchy behaviour
if (options.reverseLabels) {
dupLabels = dupLabels.reverse();
}
dupLabels.forEach((label, i) => {
ctx.save();
ctx.textAlign = options.align || 'right';
ctx.font = `${options.size || '20px'} ${options.font || 'Arial'}`;
ctx.fillStyle = options.color || 'black'
let xPos = x.getPixelForValue(labels[0]) - ctx.measureText(label).width;
let yPos = (y.getPixelForValue(y.ticks[i].value) + y.getPixelForValue(y.ticks[i + 1].value)) / 2;
ctx.fillText(label, xPos, yPos)
ctx.restore();
});
}
}]
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.0/chart.js"></script>
</body>
推荐阅读
- mysql - 在带有条件的选择语句中选择查询
- javascript - 制作图片作为链接
- java - 如何将参数从 Activity 传递到 Fragment 中的函数
- docker - 恐慌:无法引导订购者。读取创世块文件时出错:打开/etc/hyperledger/fabric/genesisblock:没有这样的文件或目录
- javascript - 如何使用 css 和 html 在单击垂直侧边栏菜单时显示子列表?
- elasticsearch - 在不丢失数据的情况下更新积极使用的索引的配置
- java - java - 如何在java中反序列化Stream中的字符串?
- c# - C# - 计时器滴答声比指定的间隔更短,导致重复作业并行运行
- html - HTML 元素在其上应用 CSS 时被忽略
- javascript - jQuery知道我们什么时候到达div的末尾