处理图表JS中的X轴标签位置

请看看这个小提琴

如果您调整输出窗口的大小，您将注意到x轴的标签倾斜。这对我很好。但是，如果您注意到标签的最终位置是条的中心。我希望标签的末端位置是条的右侧末端。如何实现呢？

我的配置是

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["2 Jan", "9 Jan", "16 Jan", "23 Jan", "30 Jan", "6 Feb", "13 Feb"],
        datasets: [{
            data: [6, 87, 56, 15, 88, 60, 12],
        }]
    },
    options: {
        legend: {
            "display": false
        },
        tooltips: {
            "enabled": false
        },
        scales: {
            yAxes: [{
                display: false,
                gridLines: {
                    display : false
                },
                ticks: {
                    display: false,
                    beginAtZero:true
                }
            }],
            xAxes: [{
                gridLines: {
                    display : false
                },
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

jordanwillis.. 5

当然可以实现“正确的”对齐刻度刻度标签，而不是原始的“中心”对齐刻度刻度标签，但是不幸的是，实现起来不是很简单。让我引导您完成操作，然后提供示例。

1）首先，由于没有配置选项可控制此操作，因此我们必须考虑执行某种自定义实现。事实证明，条形图中的刻度刻度标签是作为Category刻度绘制方法的一部分呈现的。因此，我们必须以某种方式覆盖此draw方法以更改为新的对齐方式。

2）根据API，有一种记录的方法可以创建新的比例尺类型，因此我们应该能够使用类似的方法来扩展Category比例尺类型并覆盖其draw方法。

由于所有秤都包含在内，因此ScaleService我们必须使用以下方法扩展现有秤类型。

var CategoryRightAligned = Chart.scaleService.getScaleConstructor('category').extend({});

3）现在，只需弄清楚draw我们需要修改方法的哪一部分即可。看完之后，看起来我们需要更改计算逻辑labelX（渲染刻度标签的像素位置）。这将是新的逻辑。

// current logic for getting pixel value of each label (we will use the logic below to 
// adjust if necessary)
labelX = me.getPixelForTick(index, gridLines.offsetGridLines) + optionTicks.labelOffset;

// get a reference to the bar chart controller so we can determine the chart's bar width
var meta = me.chart.getDatasetMeta(0);

// use the bart chart controller to calculate the bar width
var barWidth = meta.controller.calculateBarWidth(meta.controller.getRuler());

// if the labels are rotated, then move the pixel location from the middle of the bar 
// to the far right of the bar
if (labelRotationRadians != 0) {
  labelX += barWidth / 2;
}

4）现在，我们只需要注册新比例并配置图表即可使用它（而不是条形图默认类别比例）。

Chart.scaleService.registerScaleType('categoryRightAligned', CategoryRightAligned, {position: 'bottom'});

xAxes: [{
  type: 'categoryRightAligned',
  gridLines: {
    display : false,
    offsetGridLines: true
  },
  ticks: {
    beginAtZero:true,
  }
}]

请参阅此jsfiddle示例，以实际方式查看它并查看所有内容如何组合在一起。

当然可以实现“正确的”对齐刻度刻度标签，而不是原始的“中心”对齐刻度刻度标签，但是不幸的是，实现起来不是很简单。让我引导您完成操作，然后提供示例。

1）首先，由于没有配置选项可控制此操作，因此我们必须考虑执行某种自定义实现。事实证明，条形图中的刻度刻度标签是作为Category刻度绘制方法的一部分呈现的。因此，我们必须以某种方式覆盖此draw方法以更改为新的对齐方式。

2）根据API，有一种记录的方法可以创建新的比例尺类型，因此我们应该能够使用类似的方法来扩展Category比例尺类型并覆盖其draw方法。

由于所有秤都包含在内，因此ScaleService我们必须使用以下方法扩展现有秤类型。

var CategoryRightAligned = Chart.scaleService.getScaleConstructor('category').extend({});

3）现在，只需弄清楚draw我们需要修改方法的哪一部分即可。看完之后，看起来我们需要更改计算逻辑labelX（渲染刻度标签的像素位置）。这将是新的逻辑。

// current logic for getting pixel value of each label (we will use the logic below to 
// adjust if necessary)
labelX = me.getPixelForTick(index, gridLines.offsetGridLines) + optionTicks.labelOffset;

// get a reference to the bar chart controller so we can determine the chart's bar width
var meta = me.chart.getDatasetMeta(0);

// use the bart chart controller to calculate the bar width
var barWidth = meta.controller.calculateBarWidth(meta.controller.getRuler());

// if the labels are rotated, then move the pixel location from the middle of the bar 
// to the far right of the bar
if (labelRotationRadians != 0) {
  labelX += barWidth / 2;
}

4）现在，我们只需要注册新比例并配置图表即可使用它（而不是条形图默认类别比例）。

Chart.scaleService.registerScaleType('categoryRightAligned', CategoryRightAligned, {position: 'bottom'});

xAxes: [{
  type: 'categoryRightAligned',
  gridLines: {
    display : false,
    offsetGridLines: true
  },
  ticks: {
    beginAtZero:true,
  }
}]

请参阅此jsfiddle示例，以实际方式查看它并查看所有内容如何组合在一起。