我有一个条形图,在 x 轴上有日期。我想让周末变得大胆或给它一个不同的颜色。
window.myBar = new Chart(ctx, {
type: 'bar',
data: barChartData,
options: {
title: {
display: false,
},
tooltips: {
mode: 'index',
intersect: false
},
legend: {
display: true,
position: "top"
},
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
stacked: true,
ticks: {
fontColor:'#CCCCCC',
callback: function(value, index, values) {
if (value.substring(0, 3) == 'Sat' || value.substring(0, 3) == 'Sun') {
return value.toUpperCase();
} else {
return value;
}
},
}
}],
yAxes: [{
stacked: true,
}]
}
}
});
我还研究了次要刻度和主要刻度配置,但不确定这是否是我必须研究的内容以及如何实现。
最佳答案
您可以定义周末的风格 ticks
通过 ticks.major
配置如下。
ticks: {
major: {
enabled: true,
fontStyle: 'bold',
fontColor: 'rgb(54, 143, 3)'
}
},
此外,您需要将所需的刻度标记为 major
通过 afterBuildTicks
打回来。afterBuildTicks: (scale, ticks) => {
ticks.forEach(t => {
const day = new Date(t.value).getDay();
t.major = (day == 0 || day == 6);
});
return ticks;
}
请查看下面的可运行代码片段。const dates = [];
let day = new Date('2020-01-01');
for (let i = 0; i < 20; i++) {
dates.push(new Date(day.getFullYear(), day.getMonth(), day.getDate()));
day.setDate(day.getDate() + 1);
};
function generateData() {
return dates.map(d => ({ x: d, y: Math.floor(Math.random() * 10) + 1 }));
};
new Chart('myChart', {
type: 'bar',
data: {
datasets: [{
label: 'Dataset 1',
data: generateData(),
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgb(255, 99, 132)',
borderWidth: 1
},
{
label: 'Dataset 2',
data: generateData(),
backgroundColor: 'rgba(255, 159, 64, 0.2)',
borderColor: 'rgb(255, 159, 64)',
borderWidth: 1
},
{
label: 'Dataset 3',
data: generateData(),
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgb(54, 162, 235)',
borderWidth: 1
}
]
},
options: {
scales: {
xAxes: [{
offset: true,
stacked: true,
type: 'time',
time: {
unit: 'day',
displayFormats: {
day: 'ddd D MMM YYYY',
month: 'ddd D MMM YYYY'
},
tooltipFormat: 'ddd D MMM YYYY'
},
ticks: {
major: {
enabled: true,
fontStyle: 'bold',
fontColor: 'rgb(54, 143, 3)'
}
},
afterBuildTicks: (scale, ticks) => {
ticks.forEach(t => {
const day = new Date(t.value).getDay();
t.major = (day == 0 || day == 6);
});
return ticks;
}
}],
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.0/Chart.bundle.min.js"></script>
<canvas id="myChart" height="100"></canvas>
关于chart.js - 图表 Js,对轴上的一些刻度设置不同的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54220634/