使图表中的某些刻度变暗

Question

到目前为止的图形：

我正在尝试使0,5和11的刻度变暗，但在chart.js网站上似乎找不到任何信息。我正在使用chart.js2和angular 5。 我将隐藏其他标签，以便仅显示某些标签，具体取决于数据的长度。

  ngOnInit() {
    this.chart = new Chart('canvas', {
      type: 'line',
      data: {
        labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9','10', '11'],
        datasets: [
          {
            label: 'test',
            data: [
              100, 200, 300, 500, 100, 900, 100, 200, 500
            ],
            borderColor: '#549cef',
            backgroundColor: 'rgba(0,0,0,0.0)',
            pointBackgroundColor: 'white',
            pointRadius: 10,
            pointBorderWidth: this.getThick(),
            pointHoverBackgroundColor: '#549cef',
            borderWidth: 3
          }
        ]
      },
      options: {
        responsive: true,
        scales: {
          xAxes:[{
            gridLines: {
              drawBorder: true,
              drawOnChartArea: false,
            },
            ticks: {
              callback: function(dataLabel, index,data){
                return  data.length < 5? '':
                 data.length<12 && (index==0 || index==(data.length-1)) ? '':
                  (index==0 || index == 5 || index == 11)? dataLabel: '';
              }
            }
          }],},

Answer 1

变暗 x轴标签，
您可以在ticks

下使用以下选项

ticks: {
  fontColor: '#000000',
  fontStyle: 'bold',

请参阅以下工作片段...

$(document).ready(function() {
  new Chart(document.getElementById('myChart').getContext('2d'), {
    type: 'line',
    data: {
      labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9','10', '11'],
      datasets: [
        {
          label: 'test',
          data: [
            100, 200, 300, 500, 100, 900, 100, 200, 500
          ],
          borderColor: '#549cef',
          backgroundColor: 'rgba(0,0,0,0.0)',
          pointBackgroundColor: 'white',
          pointRadius: 10,
          //pointBorderWidth: this.getThick(),
          pointHoverBackgroundColor: '#549cef',
          borderWidth: 3
        }
      ]
    },
    options: {
      responsive: true,
      scales: {
        xAxes:[{
          gridLines: {
            drawBorder: true,
            drawOnChartArea: false,
          },
          ticks: {
            fontColor: '#000000',
            fontStyle: 'bold',
            callback: function(dataLabel, index,data){
              return  data.length < 5? '':
               data.length<12 && (index==0 || index==(data.length-1)) ? '':
                (index==0 || index == 5 || index == 11)? dataLabel: '';
            }
          }
        }],
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

编辑

不确定是否可以仅设置轴标签上方的破折号，
但是您可以使用颜色数组分别为每个网格线设置样式。

有关示例，请参见以下工作片段...

$(document).ready(function() {
  new Chart(document.getElementById('myChart').getContext('2d'), {
    type: 'line',
    data: {
      labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9','10', '11'],
      datasets: [
        {
          label: 'test',
          data: [
            100, 200, 300, 500, 100, 900, 100, 200, 500
          ],
          borderColor: '#549cef',
          backgroundColor: 'rgba(0,0,0,0.0)',
          pointBackgroundColor: 'white',
          pointRadius: 10,
          //pointBorderWidth: this.getThick(),
          pointHoverBackgroundColor: '#549cef',
          borderWidth: 3
        }
      ]
    },
    options: {
      responsive: true,
      scales: {
        xAxes:[{
          gridLines: {
            drawBorder: true,
            drawOnChartArea: false,
          },
          gridLines: {
            color: ['#000000', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', '#000000', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', 'rgba(0, 0, 0, 0.1)', '#000000'],
            drawBorder: false
          },
          ticks: {
            fontColor: '#000000',
            fontStyle: 'bold',
            callback: function(dataLabel, index,data){
              return  data.length < 5? '':
               data.length<12 && (index==0 || index==(data.length-1)) ? '':
                (index==0 || index == 5 || index == 11)? dataLabel: '';
            }
          }
        }],
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>