Question

请查看此fiddle

如果您调整输出窗口的大小，您会注意到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
                }
            }]
        }
    }
});

Answer 1

当然有可能实现“正确”。对齐刻度刻度标签而不是原始＆＃39;中心＆＃39;对齐刻度刻度标签，但不幸的是它实现起来并不是很直接。让我引导您完成如何操作，然后提供一个示例。

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

2）根据API，有一种记录的方法可以创建新的比例类型，因此我们应该能够使用类似的方法来扩展Category比例类型并覆盖它[＆＃39; s 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示例，了解其实际情况并了解所有内容是如何组合在一起的。

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

1 个答案: