Chartjs：使一些刻度（周日，周六）变红

Question

我试着让蜱虫变成红色。但它不起作用。当标签没有标签时 - Sa/Su 它工作。所有标签 - 灰色，但当我有 Su 或 Sa 标签时，只显示黑色

   ticks: {
          fontSize: 9,
          fontColor: curLabels.map((item) => {
            if(item === 'Su' || item === 'Sa')
              return 'red';
            return 'rgba(0, 0, 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, 0, 0.4)',
          maxRotation: 0,
          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,
          tickMarkLength: 1,
        },
      }],
    },
  };

Answer 1

根据 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;
}

请看下面的可运行代码sn-p。

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, 99, 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,
            fontStyle: 'bold',
            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>