ChartJS 上不同的刻度样式 [英] Different styles in ticks on ChartJS

问题描述

是否可以在 xAxes 的刻度中分隔样式或通过其他函数绘制near.Callback - 只使用值进行操作.

例如:

解决方案

您可以使用 插件核心 API.它提供了不同的钩子，可用于执行自定义代码.在下面的代码片段中，我使用 afterDraw 挂钩 在每个条形下方绘制不同样式的文本.

请注意，在编写自己的标签时不需要计算文本大小.您可以简单地在第一个文本部分添加一个空格并使用 ctx.textAlign 'right'，然后使用 ctx.textAlign 'left' 绘制第二个文本部分.

<块引用>

绘制自己的刻度标签时，需要指示 Chart.js 不显示默认标签.这可以通过图表options中的以下定义来完成.

刻度:{x轴:[{滴答声:{显示:假}}],

<块引用>

您还需要为图表底部定义一些填充，否则您将看不到自定义刻度标签.

布局:{填充:{底部:20}},

new Chart(document.getElementById('myChart'), {类型:'酒吧'，插件:[{afterDraw: 图表 =>{var ctx = 图表.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 = '对';ctx.font = '12px 宋体';ctx.fillText(l + ' ', x, yAxis.bottom + 18);ctx.textAlign = '左';ctx.font = '粗体 14px Arial';ctx.fillStyle = '蓝色';ctx.fillText(value, x, yAxis.bottom + 17);});ctx.restore();}}],数据: {标签:['错误'，'警告'，'信息']，数据集:[{label: '我的第一个数据集',数据:[30、59、80]，填充:假，背景颜色:['rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)'],边框颜色:['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)'],边框宽度:1}]},选项: {布局: {填充:{底部:20}},秤:{x轴:[{滴答声:{显示:假}}],y轴:[{滴答声:{beginAtZero: 真}}]}}});

canvas {最大宽度: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>

Is it possible to separate styles in ticks for xAxes or draw by some other function near.Callback - just operate with values.

For example:

解决方案

You can make use of the Plugin Core API. It offers different hooks that may be used for executing custom code. In below code snippet, I use the afterDraw hook to draw text of different styles underneath each bars.

Note that no computation of text size is needed when composing your own labels labels. You can simply add a space to the first text section and use ctx.textAlign 'right', then use ctx.textAlign 'left' for drawing the second text section.

When drawing your own tick labels, you need to instruct Chart.js not to display the default labels. This can be done through the following definition inside the chart options.

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

You also need to define some padding for the bottom of the chart, otherwise you won't see your custom tick labels.

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>

这篇关于ChartJS 上不同的刻度样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！