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.major配置如下定义周末ticks的风格。

ticks: {
  major: {
     enabled: true,
     fontStyle: 'bold',
     fontColor: 'rgb(54, 143, 3)'
  }
},

此外，您还需要通过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: '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>

Answer 2

这就是我要解决的问题的方式：

1。。在托管图表的 HTML文档的<head>部分中链接样式表：

<link rel="stylesheet" type="text/css" href="<path_to_css_file>">

2。。使用 devtools 来选择要更改图表颜色的图表标签。即

在Firefox 中，您可以执行以下操作：

右键单击图表标签，然后选择检查元素
右键单击并选择 Copy => CSS Selector

3。 在步骤1中创建一个CSS文件到指定路径，然后粘贴步骤2中的CSS选择器。

<css_selector> { color: <color_hex_desired>; /* any other styling properties desired */ }

4。。重新加载页面并验证样式更改。

Answer 3

在ticks中使用xAxes。

xAxes: [{
            ticks: {
            fontStyle: "bold"
            }
            }]

Answer 4

我也遇到了这个问题，如果只需要粗体，我的解决方案是使用fancy font generator并将生成的???-?????文本用作标签属性。不管做什么，对吧？

Answer 5

我有一个类似的要求，并决定更改网格线本身的颜色。 styling 的文档表明这可以通过键颜色实现，嵌套在 gridLines 键中的缩放配置下。

<块引用>

网格线的颜色。如果指定为数组，则第一种颜色适用于第一条网格线，第二种颜色适用于第二条网格线，依此类推。

如果您已经知道 x 轴标签的顺序，您可以构建一个专门为某些刻度着色的数组。（就像在 OP 中，周末）。

var barChartDataXaxis = ['Sun','Mon','Tues','Wed','Thurs','Fri','Sat'];
var xaxisDayMark = [];

for (let i = 0; i < barChartDataXaxis.length; ++i) {

        // standard grey line
        xaxisDayMark.push('rgba(0, 0, 0, 0.1)');

    if (barChartDataXaxis[i] == 'Sat' || barChartDataXaxis[i] === 'Sun') {

        // else some nice coloring
        xaxisDayMark.splice(i, 1, 'rgb(0, 0, 225)');

    }

}

window.myBar = new Chart(ctx, {
        type: 'bar',
        data: barChartData,
        options: {
            scales: {
                xAxes: [{
                    gridLines: {
                        color: xaxisDayMark // use our array here
                    }
                }]
            }
        }
    });

图表J，在轴上的刻度线样式不同

5 个答案: