Chart.js - 更改 x 轴时间序列的刻度/标签位置

Question

我在 Chart.js 中沿图表的 x 轴有一个日期时间序列，但已根据此处的方法将刻度/标签的位置更改为条形之间：

Chart.js : How I change the x axes ticks labels alignment in any sizes?

这导致日期时间移动到与它们相关的栏的右侧，而我需要它们在左侧。所以我将返回计算改为减去金额而不是加：

var TimeCenterScale = Chart.scaleService.getScaleConstructor('time').extend({
    getPixelForTick: function(index) {
        var ticks = this.getTicks();
        if (index < 0 || index >= ticks.length) {
            return null;
        }
        // Get the pixel value for the current tick.
        var px = this.getPixelForOffset(ticks[index].value);

        // Get the next tick's pixel value.
        var nextPx = this.right;
        var nextTick = ticks[index + 1];
        if (nextTick) {
            nextPx = this.getPixelForOffset(nextTick.value);
        }

        // Align the labels in the middle of the current and next tick.
        return px - (nextPx - px) / 2;
    },
});

除了最后一列之外，这大部分都有效。 如何正确对齐最后一列？

Answer 1

我认为问题出在这几行

    var nextPx = this.right;
    var nextTick = ticks[index + 1];
    if (nextTick) {
       nextPx = this.getPixelForOffset(nextTick.value);
       return px - (nextPx - px) / 2;
    }
    else{
       var prevTick = ticks[index - 1];
       prevPx = this.getPixelForOffset(prevTick .value);
       return px - (px - prevPx ) / 2;
//       return px + (px - prevPx ) / 2;   if the above statement don't work

    }

当 nextTick 为 null 时，nextPx 取 this.right 的值，这会产生问题。您必须为 nextTick 添加一个 else 块来处理最右边的标签。 我更新了 else 块的代码。这只是一个想法，您可能会找到更好的方法。

Answer 2

您可以在 x 轴上简单地定义 offset: true，如下所示：

options: {
  scales: {
    xAxes: [{
      offset: true,
      ...

请看下面的可运行代码sn-p。

new Chart("chart", {
  type: 'bar',
  data: {
    labels: ["2020-05-13", "2020-05-11", "2020-05-12", "2020-05-14", "2020-05-09", "2020-05-10"],
    datasets: [{
      label: "My Dataset",
      backgroundColor: "#02a499",
      borderColor: "#ffffff",
      borderWidth: 1,
      hoverBackgroundColor: "#02a499",
      hoverBorderColor: "#02a499",
      data: [20, 11, 9, 22, 11, 9]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        offset: true,
        type: 'time',
        time: {
          unit: 'day',
          source: 'data',
          tooltipFormat: 'MMM DD'
        },
        gridLines: {
          display: false
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        },
        gridLines: {
          display: false
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="chart" height="120"></canvas>

Answer 3

根据@MuhammadUmarFarooq 的回答，我实现了以下代码来检查上一个刻度是否没有下一个。我使用的是distribution: 'series'，所以 x 轴上的所有刻度都应该是相同的距离，所以我只是计算任意两个之间的距离。

// Get the next tick's pixel value.
        var nextPx = this.right;
        var nextTick = ticks[index + 1];
        if (nextTick) {
            nextPx = this.getPixelForOffset(nextTick.value);
        } else {
            var previousPx = this.left;
            var previousTick = ticks[index - 1];
            previousPx = this.getPixelForOffset(previousTick.value);
            return previousPx + (px - previousPx) / 2;
        }