Question

我有一个非常简单的Chart.js条形图，其中没有标记x轴。看起来像这样：

我希望条形图沿x轴居中，而不是如上图所示左对齐。有任何想法吗？这是我的数据：

        datasets: [{
          label: 'Blueberries',
          data: [this.get('fruit').bluebs[0]],
          borderColor: 'blue',
          fill: false,
          lineTension: 0,
          borderDash: [10,5]
        }, {
          label: 'Apples',
          data: [this.get('fruit').apples[1]],
          borderColor: 'red',
          fill: false,
          lineTension: 0.1
        }]

这是我的配置：

    return {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        xAxes: [{
          display: false,
          ticks: {
            scaleBeginAtZero: false
          }
        }],
        yAxes: [{
          display: true,
          ticks: {
            beginAtZero: true,
            fontSize: 12,
            fontFamily: 'Lato, sans-serif'
          },
          scaleLabel: {
            display: true,
            labelString: 'Fruits Counted',
            fontStyle: 'bold',
            fontFamily: 'Lato, sans-serif'
          }
        }]
      },
      legend: {
        display: true,
        position: 'bottom',
        labels: {
          fontColor: '#333',
          fontFamily: 'Lato, sans-serif',
        }
      }
    };

如果反对我的人告诉我为什么，那么我真的会对此采取行动。：/

Answer 1

chart.js的默认行为是居中显示图表，看图片，我怀疑您是否在数据的labels数组中提供了两个值（不确定），如果不是这种情况，请参见此小提琴（{{ 3}}）或以下代码，可能会有所帮助。

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {    
    datasets: [{
          label: 'Blueberries',
          data: [2],
          borderColor: 'blue',
          fill: false,
          lineTension: 0,
          borderDash: [10,5]
        }, {
          label: 'Apples',
          data: [1],
          borderColor: 'red',
          fill: false,
          lineTension: 0.1
        }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      xAxes: [{
        display: false,
        ticks: {
          scaleBeginAtZero: false
        }
      }],
      yAxes: [{
        display: true,
        ticks: {
          beginAtZero: true,
          fontSize: 12,
          fontFamily: 'Lato, sans-serif'
        },
        scaleLabel: {
          display: true,
          labelString: 'Fruits Counted',
          fontStyle: 'bold',
          fontFamily: 'Lato, sans-serif'
        }
      }]
    },
    legend: {
      display: true,
      position: 'bottom',
      labels: {
        fontColor: '#333',
        fontFamily: 'Lato, sans-serif',
      }
    }
  }
});

如何在Chart.js条形图的x轴上居中放置条形图？

1 个答案: