如何解决Chartjs:打勾星期日,星期六红色
我试图使刻度线变成红色。但它不起作用。当标签没有标签时-Sa / Su起作用。所有标签-灰色,但是当我有Su或Sa标签时,标签只会变成黑色
ticks: {
fontSize: 9,fontColor: curLabels.map((item) => {
if(item === 'Su' || item === 'Sa')
return 'red';
return 'rgba(0,0.4)';
}),maxRotation: 0,},
编辑:
<div style={{height: '100%'}} className='position-relative'>
<Line
key='lineChart17'
data={dataForChart}
options={lineOptions}
style={{height: '90px',padding: '5px',width: '100%'}}
redraw
/>
</div>
图表选项。我收到错误-滴答没有主要属性。在控制台中,它只是字符串-Mo / Th / Fr / We / Su ...:
const lineOptions = {
animation: {
duration: 0
},layout:{
padding:{
left: 0,right: 0,top: 5,bottom: 0
}
},maintainAspectRatio: false,scales: {
xAxes: [{
display: true,gridLines: {
display: true,tickMarkLength: 1,ticks: {
fontSize: 9,fontColor: 'rgba(0,0.4)',major: {
enabled: true,fontStyle: 'bold',fontColor: 'red'
},afterBuildTicks: (scale,ticks) => {
ticks.forEach(t => {
t.major = (t === 'Su');
});
return ticks;
},}],yAxes: [{
display: false,gridLines: {
display: false,};
解决方法
根据Chart.js文档,选项ticks.fontColor
不接受array
,而接受简单的string
。
不过,您可以通过ticks.major
配置如下定义周末ticks
的风格。
ticks: {
major: {
enabled: true,fontStyle: 'bold',fontColor: 'red'
}
},
此外,您还需要通过afterBuildTicks
回调将所需的价格变动标记为major
。
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: 'My Dataset',data: generateData(),backgroundColor: 'rgba(255,99,132,0.2)',borderColor: 'rgb(255,132)',borderWidth: 1
}
]
},options: {
scales: {
xAxes: [{
offset: true,type: 'time',time: {
unit: 'day',displayFormats: {
day: 'dd D MMM',month: 'dd D MMM'
},tooltipFormat: 'dd D MMM'
},ticks: {
major: {
enabled: true,fontColor: 'red'
}
},afterBuildTicks: (scale,ticks) => {
ticks.forEach(t => {
const day = new Date(t.value).getDay();
t.major = (day == 0 || day == 6);
});
return ticks;
}
}],yAxes: [{
ticks: {
beginAtZero: true,stepSize: 2
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.0/Chart.bundle.min.js"></script>
<canvas id="myChart" height="100"></canvas>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。