(chart.js v3.5.1) 更改栏背景，点击标签字体颜色

Question

我想更改栏背景、标签字体颜色和标签字体粗细。但只有条形背景颜色有效。

如何在点击时更改字体颜色和字体粗细？

请帮帮我

const backgroundColor = ['rgb(197,197,197)','rgb(197,197,197)','rgb(197,197,197)','rgb(197,197,197)','rgb(197,197,197)','rgb(197,197,197)','rgb(197,197,197)','rgb(197,197,197)','rgb(197,197,197)','rgb(197,197,197)','rgb(197,197,197)','rgb(197,197,197)'];
const fontColor = ['rgb(153,153,153)','rgb(153,153,153)','rgb(153,153,153)','rgb(153,153,153)','rgb(153,153,153)','rgb(153,153,153)','rgb(153,153,153)','rgb(153,153,153)','rgb(153,153,153)','rgb(153,153,153)','rgb(153,153,153)','rgb(153,153,153)'];
const fontWeight = [400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 400, 400];          
const barChart = new Chart(
            document.getElementById("barChart"), {
            type: 'bar',
            data: {
                labels: ["jan", "fab", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"],
                datasets: [{
                    data: [8, 2, 3, 0, 5, 2, 2, 0, 0, 6, 10, 2],
                    backgroundColor: backgroundColor,
                    borderRadius: 6,
                    borderSkipped: false,
                    barThickness: 20,
                }]      
            },                                                                         
            options:{
                onClick: function(evt){
                    const points = barChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
                    if (points.length) {
                        const firstPoint = points[0];
                        for (let i=0; i<backgroundColor.length; i++) {
                            backgroundColor[i] = 'rgb(197,197,197)';
                            fontColor[i] = 'rgb(153,153,153)';
                            fontWeight[i] = 400;
                        }
                        backgroundColor[firstPoint.index] = '#2157e4';
                        fontColor[firstPoint.index] = 'rgb(32,32,32)';
                        fontWeight[firstPoint.index] = 600;

                        this.update();
                    }
                },                                                
                scales: {
                    y: {
                        display: false
                    },  
                    x: {
                        grid: {
                            color: 'white',
                            drawBorder: false
                        },
                        ticks: {
                            color: fontColor,
                            font: {
                                family: "'Pretendard', sans-serif",
                                weight: fontWeight
                            },
                        }
                    }
                },

});

我想更改栏背景、标签字体颜色和标签字体粗细。但只有条形背景颜色有效。

如何在点击时更改字体颜色和字体粗细？

请帮帮我

Answer 1

关键是在更改数据时解决图表配置中的正确属性。这些基本上是 chart.data.datasets[0]backgroundColor、chart.options.scales.x.ticks.color 和 chart.options.scales.x.ticks.font.weight.

请查看下面您修改后的代码，看看它是如何工作的。

new Chart("barChart", {
  type: 'bar',
  data: {
    labels: ["jan", "fab", "mar", "apr", "may", "jun", "jul", "aug", "sep", "oct", "nov", "dec"],
    datasets: [{
      label: 'Data',
      data: [8, 2, 3, 0, 5, 2, 2, 0, 0, 6, 10, 2],
      backgroundColor: 'rgb(197,197,197)',
      borderRadius: 6,
      borderSkipped: false,
      barThickness: 20
    }]
  },
  options: {
    onClick: (event, elements, chart) => {
      if (elements.length) {
        const dataset = chart.data.datasets[0];
        dataset.backgroundColor = [];
        const ticks = chart.options.scales.x.ticks;
        ticks.color = [];
        ticks.font.weight = [];
        const i = elements[0].index;
        for (let i = 0; i < dataset.data.length; i++) {
          if (elements[0].index == i) {
            dataset.backgroundColor[i] = 'rgb(32,32,32)';
            ticks.color[i] = 'rgb(32,32,32)';
            ticks.font.weight[i] = 600;
          } else {
            dataset.backgroundColor[i] = 'rgb(197,197,197)';
            ticks.color[i] = 'rgb(153,153,153)';
            ticks.font.weight[i] = 400;
          }
        }
        chart.update();
      }
    },
    scales: {
      y: {
        display: false
      },
      x: {
        grid: {
          color: 'white',
          drawBorder: false
        },
        ticks: {
          color: 'rgb(153,153,153)',
          font: {
            family: "'Pretendard', sans-serif",
            weight: 400
          }
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="barChart"></canvas>

(chart.js v3.5.1) 更改栏背景，点击标签字体颜色

(chart.js v3.5.1) change bar background, label font color on click

charts

chart.js

bar-chart