chart.js - 在chart.js中将y轴旋转到顶部，将x轴旋转到左边

Question

我有一个图表，目前显示如下：

但我想旋转它看起来更像这样：

（不改变“你的评分”）方向。

将 x 轴放在左侧，将 y 轴放在顶部应该相对简单，但我很挣扎。

以下是相关代码：

var ctx = document.getElementById('canvas').getContext('2d');
window.myHorizontalBar = new Chart(ctx, {
  type:'line',    // 'horizontalBar',
  data: horizontalBarChartData,
  options: {
    annotation: {
         annotations: [{
           type: 'line',
       mode: 'vertical',
       scaleID: 'y-axis-0',
       value: 20,
       label: {
         content: 'Your Rating   ',
         enabled: true
           }
         }]
       },
scales: {
    xAxes: [{
        gridLines: {
            display:false
        }
    }],
    yAxes: [{
      gridLines: {
            display:false
        }
    }]
},

    // Elements options apply to all of the options unless overridden in a dataset
    // In this case, we are setting the border of each horizontal bar to be 2px wide

    responsive: true,
    legend: {

       display: false
    },
    title: {
      display: false,
      text: 'text4'
    }
  }
});

}

标签： chart.js