在ChartJS上的ticks中的不同风格

Question

是否有可能在ticks中为xAxes分离样式，或者通过其他函数near.Callback绘制--只是用值来操作。

例如，可以在ticks中为xAxes分离样式，或者通过其他函数near.Callback绘制--只是用值来操作。

Answer 1

你可以利用 插件核心API. 它提供了不同的钩子，可用于执行自定义代码。在下面的代码片段中，我使用了 afterDraw 钩住 绘声绘色 在每个条形图下有不同风格的文字。

注意，在组成自己的标签标签时，不需要计算文字大小。您可以简单地在第一个文本部分添加一个空格，然后使用 ctx.textAlign '右'，然后用 ctx.textAlign '左'来绘制第二个文本部分。

当绘制您自己的tick标签时，您需要指示Chart.js不要显示默认标签。这可以通过图表中的以下定义来实现。options.

scales: {
  xAxes: [{
    ticks: {
      display: false
    }
  }], 

你还需要为图表的底部定义一些padding，否则你将看不到你自定义的tick标签。

layout: {
  padding: {
    bottom: 20
  }
},

new Chart(document.getElementById('myChart'), {
  type: 'bar',
  plugins: [{
    afterDraw: chart => {
      var ctx = chart.chart.ctx;
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['y-axis-0'];
      ctx.save();
      chart.data.labels.forEach((l, i) => {
        var value = chart.data.datasets[0].data[i];
        var x = xAxis.getPixelForValue(l);
        ctx.textAlign = 'right';
        ctx.font = '12px Arial';
        ctx.fillText(l + ' ', x, yAxis.bottom + 18);
        ctx.textAlign = 'left';
        ctx.font = 'bold 14px Arial';
        ctx.fillStyle = 'blue';
        ctx.fillText(value, x, yAxis.bottom + 17);
      });
      ctx.restore();
    }
  }],
  data: {
    labels: ['Error', 'Warn', 'Info'],
    datasets: [{
      label: 'My First Dataset',
      data: [30, 59, 80],
      fill: false,
      backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)'],
      borderColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)'],
      borderWidth: 1
    }]
  },
  options: {
    layout: {
      padding: {
        bottom: 20
      }
    },
    scales: {
      xAxes: [{
        ticks: {
          display: false
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

canvas {
  max-width: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" width="10" height="5"></canvas>