CHART.JS如何才能将y轴上的标签偏移/移动/调整为位于网格线的中间而不是居中于网格线? [英] CHART.JS How can I offset/move/adjust the labels on the y-axis to be in the middle of the gridlines instead of centered on the gridlines?

问题描述

我在Ionic/Angular应用程序内部使用chart.js来构建线形图.我现在遇到的一个大问题是，我希望沿y轴(绿色，黄色，橙色，红色)的标签位于水平网格线之间，而不是像当前在此处的网格线那样居中. ..

I am using chart.js inside of an Ionic/Angular application to build a line graph. The big problem I am running into now is that I would like to have the labels along the y axis (Green, Yellow, Orange, Red) positioned between the horizontal gridlines instead of centered on the gridlines as they are currently in the image here...

我尝试使用此问题中提到的插件，没有真幸运我也尝试过在实际的chart.js文档中再次使用offsetGridlines属性，但是没有运气.

I tried using the plugin mentioned in this question with no such luck. I've also tried using the offsetGridlines property in the actual chart.js documentation again with no luck.

免费奖励积分，如果有人也可以帮助使底部的实际轴线与其他水平网格线的宽度相同

Free bonus points if anyone can also help out with having the actual axis line at the bottom to be the same width as the other horizontal gridlines

这是处理图表此特定方面的代码...

Here is the code that deals with this particular aspect of the chart...

options: {
    legend: {
      display: false
    },
    scaleShowVerticalLines: false,
    layout: {
      padding: 25
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: false
        },
        ticks: {
          display: false
        }
      }],
      yAxes: [{
        gridLines: {
          drawBorder: false
        },
        ticks: {
          min: 0,
          max: 100,
          stepSize: 25,
          fontColor: 'white',
          callback: function(value) {  
            if (value === 25) {
                return 'Red';
            } else if (value === 50) {
                return 'Orange';
            } else if (value === 75) {
                return 'Yellow';
            } else if (value === 100){
                return 'Green';
            } else {
              return '';
            }
          }
        }
      }]
    }
  },

推荐答案

我已在以下代码段中注释了这些更改，但在此简要说明:

I've annotated the changes in the below snippet, but to briefly explain:

我集成了您链接的插件，但对其进行了修改，以将原始刻度线设置为透明，因此删除了似乎无效的beforeDraw闭包.

I integrated the plugin you linked to but modified it to set the original ticks to transparent and therefore removed the beforeDraw closure which didn't seem to work.

要获得加分，技巧是删除x轴边框，然后设置零线"的样式以匹配其他网格线.

For bonus points: the trick is to remove the x-axis border and then style the 'zero line' to match the other grid lines.

var ctx = document.getElementById("chart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
    datasets: [{
      data: [25, 35, 20, 45, 65, 26, 49, 70, 75, 87],
      borderColor: 'white',
      fill: false
    }]
  },
  options: {
    legend: {
      display: false
    },
    scaleShowVerticalLines: false,
    layout: {
      padding: 25
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: false,
          drawBorder: false, // bonus points.
        },
        ticks: {
          display: false
        }
      }],
      yAxes: [{
        gridLines: {
          drawBorder: false,
          color: 'rgba(0,0,0,.3)', // bonus points.
          zeroLineColor: 'rgba(0,0,0,.3)' // bonus points.
        },
        ticks: {
          min: 0,
          max: 100,
          stepSize: 25,
          fontColor: 'transparent', // changed from 'white'
          callback: function(value) {
            if (value === 25) {
              return 'Red';
            } else if (value === 50) {
              return 'Orange';
            } else if (value === 75) {
              return 'Yellow';
            } else if (value === 100) {
              return 'Green';
            } else {
              return '';
            }
          }
        }
      }]
    }
  },
  plugins: [{
    afterDraw: function(chart) {
      var ctx = chart.ctx;
      var yAxis = chart.scales['y-axis-0'];
      var tickGap = yAxis.getPixelForTick(1) - yAxis.getPixelForTick(0);
      // loop through ticks array
      Chart.helpers.each(yAxis.ticks, function(tick, index) {
        if (index === yAxis.ticks.length - 1) return;
        var xPos = yAxis.right;
        var yPos = yAxis.getPixelForTick(index);
        var xPadding = 10;
        // draw tick
        ctx.save();
        ctx.textBaseline = 'middle';
        ctx.textAlign = 'right';
        ctx.fillStyle = 'white';
        ctx.fillText(tick, xPos - xPadding, yPos + tickGap / 2);
        ctx.restore();
      });
    }
  }]
});

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart" style="background-color:#296390"></canvas>

这篇关于CHART.JS如何才能将y轴上的标签偏移/移动/调整为位于网格线的中间而不是居中于网格线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！