Chartjs:使一些刻度(星期日,星期六)变红

yb3bgrhw  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(352)

我试着让勾号变成红色。但它不起作用。当标签没有标签- 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>

图表的选项。我得到错误- ticks没有属性major。在控制台中它只有字符串- 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,
        },
      }],
    },
  };
bejyjqdl

bejyjqdl1#

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

请看一下下面的可运行代码片段。
第一个

相关问题