chart.js 中的自定义标签 x 轴答案

【问题标题】：custom label x-axis in chart.jschart.js 中的自定义标签 x 轴
【发布时间】：2020-12-30 07:11:55
【问题描述】：

大家好，我正在通过chart.js 制作图表（按照上文）。我想将 x 轴上的标签移动到底部，但仍将 x 轴保持在顶部，我尝试了很多方法，但我不能:((，请帮助我，谢谢。这是我的代码js：

var ctx = document.getElementById("chartComparementUserCancle").getContext('2d');
var myBarChart = new Chart(ctx, {
      type: 'horizontalBar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        legend: {
          display: false
        },
        scales: {
          yAxes: [{
            gridLines: {
              color: "rgba(0, 0, 0, 0)"
            }
          }],
          xAxes: [{
            position: "top"
          }]
        }
      }
    });

【问题讨论】：

标签： ruby-on-rails ruby chart.js

【解决方案1】：

给你

var ctx = document.getElementById("chartComparementUserCancle").getContext('2d');
var myBarChart = new Chart(ctx, {
      type: 'horizontalBar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
              'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
              'rgba(255, 99, 132, 1)',
              'rgba(54, 162, 235, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(153, 102, 255, 1)',
              'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        legend: {
          display: false
        },
        scales: {
          yAxes: [{
            gridLines: {
              color: "rgba(0, 0, 0, 0)"
            }
          }],
        }
      }
    });

【讨论】：