根据下面的图表,如何显示 Y 刻度线的自定义 HTML 标签?
const yAxisLabelsLookup = {
0: {
label: '2024-01-01',
color: 'red',
},
1: {
label: '2024-01-02',
color: 'blue',
},
2: {
label: '2024-01-03',
color: 'green',
},
3: {
label: '2024-01-04',
color: 'yellow',
},
}
const ctx = document.getElementById('chart-container');
const data = {
datasets: [{
label: 'First Dataset',
data: [
{
x: 20,
y: 0,
r: 15
}, {
x: 40,
y: 0,
r: 10
},
{
x: 20,
y: 1,
r: 10
},
{
x: 40,
y: 1,
r: 10
},
{
x: 25,
y: 2,
r: 10
},
{
x: 35,
y: 2,
r: 10
},
],
backgroundColor: 'rgb(255, 99, 132)'
}]
};
const chart = new Chart(ctx, {
type: 'bubble',
data: data,
options: {
// So we can set the height with css.
// maintainAspectRatio: false,
responsive: true,
scales: {
x: {
type: 'time',
// time: {
// displayFormats: {
// quarter: 'MMM YYYY'
// }
// }
position: 'top',
ticks: {
padding: 15,
},
},
y: {
// display: false,
ticks: {
padding: 25,
callback: function (value) {
if (value in yAxisLabelsLookup) {
const label = yAxisLabelsLookup[value].label;
const color = yAxisLabelsLookup[value].color;
return `<span style="color: ${color};">${label}</span>`;
} else {
// Return the default numeric value if no custom label is found
return value;
}
// if (value in dateLookupMap) {
// return dateLookupMap[value]
// } else {
// return ''
// }
}
}
},
}
}
});
chart.js
使用canvas来渲染图表;您无法返回 html 来格式化图表内的内容。
所有可用选项
通过配置对象来设置。
一些选项是可编写脚本的, 这意味着该值可以是一个函数,只有在需要该选项时才会调用该函数,并且 应该根据上下文返回选项的实际值,类似于
callback
的做法
勾选标签文本。
刻度标签颜色可以通过
options.scales.y.ticks.color
设置,如果需要的话可以通过编程方式设置,因为它 is
可编写脚本。同样,您可以使用 options.scales.y.ticks.font
设置标签的其他视觉属性,例如尺寸或重量。
您的代码可以更改为:
options: {
// .... other options
scales: {
// x ....
y: {
ticks: {
callback: function (value) {
if (value in yAxisLabelsLookup) {
return yAxisLabelsLookup[value].label;
} else {
return value;
}
},
color: function({tick: {value}}){
if (value in yAxisLabelsLookup){
return yAxisLabelsLookup[value].color;
}
}
}
}
}
}
片段:
const yAxisLabelsLookup = {
0: {
label: '2024-01-01',
color: 'red',
},
1: {
label: '2024-01-02',
color: 'blue',
},
2: {
label: '2024-01-03',
color: 'green',
},
3: {
label: '2024-01-04',
color: 'yellow',
},
}
const data = {
datasets: [{
label: 'First Dataset',
data: [
{
x: 20,
y: 0,
r: 15
}, {
x: 40,
y: 0,
r: 10
},
{
x: 20,
y: 1,
r: 10
},
{
x: 40,
y: 1,
r: 10
},
{
x: 25,
y: 2,
r: 10
},
{
x: 35,
y: 2,
r: 10
},
],
backgroundColor: 'rgb(255, 99, 132)'
}]
};
const chart = new Chart('chart-container', {
type: 'bubble',
data: data,
options: {
// So we can set the height with css.
// maintainAspectRatio: false,
responsive: true,
scales: {
x: {
type: 'time',
// time: {
// displayFormats: {
// quarter: 'MMM YYYY'
// }
// }
position: 'top',
ticks: {
padding: 15,
},
},
y: {
ticks: {
padding: 25,
callback: function (value) {
if (value in yAxisLabelsLookup) {
return yAxisLabelsLookup[value].label;
} else {
return value;
}
},
color: function({tick: {value}}){
if (value in yAxisLabelsLookup){
return yAxisLabelsLookup[value].color
}
}
}
},
}
}
});
<div style="max-height: 70vh">
<canvas id="chart-container"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>