Chart.js棒グラフのx軸の中心に棒を配置する方法は？

debugcn 投稿 Dev

user6506263

x軸にラベルを付けていない非常に単純なChart.js棒グラフがあります。これは次のようになります。

上の写真に示すように、バーを左揃えではなく、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',
        }
      }
    };

また、私に反対票を投じた人が理由を教えてくれれば、私は実際に行動を起こすことができます。：/

Kunal Khivensara

chart.jsのデフォルトの動作は、グラフを中央に配置することです。画像を見ると、データのlabels配列に2つの値が指定されているかどうか疑問です（わからない）。そうでない場合は、このフィドル（http：// jsfiddle）を参照してください。.net / m5rq6bdj / 2 /）または以下のコードが役立つ場合があります。

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',
      }
    }
  }
});

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]