chart.js - 图表 Js，对轴上的一些刻度设置不同的样式

Question

我有一个条形图，在 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,
                    }]
                }
            }
        });

我还研究了次要刻度和主要刻度配置，但不确定这是否是我必须研究的内容以及如何实现。

Answer 1

您可以定义周末的风格 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>