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>