从右到左绘制水平条形图

Question

我正在 Chart.js 中创建一个水平条形图，正如你在这个 jsfiddle 中看到的。

我想更改图表方向，使其从右向左绘制。我dir = rtl在 CSS 中尝试过，direction=rtl但它们不起作用。

这就是我要的：

Answer 1

我在文档中找不到执行此操作的本机方法，但是您可以通过相当简单的否定数据的解决方法来实现，以便 Chart.js 绘制负值：

1. 反转数据集中的值：

   data.datasets[0].data.map((currentValue, index, array) => {
     array[index] = currentValue * -1;
   });
   

2. 右对齐 y 轴：

   scales: {
     yAxes: [{
       position: 'right'
       ...
   

3. 重新格式化工具提示以显示：

   options = {
     tooltips: {
     callbacks: {
       label: function(tooltipItem, data) {
         var label = data.datasets[tooltipItem.datasetIndex].label || '';
   
         if (label) {
           label += ': ';
         }
         label += tooltipItem.xLabel * -1;
         return label;
       }
     }
     ...
   

4. 重新格式化刻度以显示：

   xAxes: [{
     ticks: {
       callback: function(value, index, values) {
         return value * -1;
       }
   ...
   

这是一个工作示例：

data.datasets[0].data.map((currentValue, index, array) => {
  array[index] = currentValue * -1;
});

scales: {
  yAxes: [{
    position: 'right'
    ...