動的データセットのChartJS棒グラフ固定幅

Question

棒グラフの作成にChartJsを使用しています。 データセットは動的です。データセットは動的なので、バーの幅も変化しています。

例のバー幅については

だけのための1つのラベル

多くのラベルラベルの数に関係なく、バーのための幅を修正した方法

ため

バー幅

私は次のオプションを使用しています。

xAxes: [{ 
    barPercentage: 1, 
    categoryPercentage: 0.3 
}] 

Answer 1

あなたは、これはすごい

https://jsfiddle.net/qrwvvtxs/2/

var barChartData1 = { 
 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
 
    datasets: [{ 
 
    label: 'Dataset 1', 
 
    data: [3,2,7,4,5,7,6] 
 
    }, { 
 
    label: 'Dataset 2', 
 
    backgroundColor: "#faa", 
 
    data: [11,13,21,13,16,21,18] 
 
    }] 
 
}; 
 
var barChartData2 = { 
 
    labels: ["January"], 
 
    datasets: [{ 
 
    label: 'Dataset 1', 
 
    data: [6] 
 
    }, { 
 
    label: 'Dataset 2', 
 
    backgroundColor: "#faa", 
 
    data: [11] 
 
    }] 
 
}; 
 

 
var ctx1 = document.getElementById("canvas1").getContext("2d"); 
 
var ctx2 = document.getElementById("canvas2").getContext("2d"); 
 
var myBar1 = new Chart(ctx1, { 
 
    type: 'bar', 
 
    data: barChartData1, 
 
    options: { 
 
    responsive: true, 
 
    scales: { 
 
     xAxes: [{ 
 
      barPercentage: 1, 
 
      categoryPercentage: 0.5/10 * barChartData1.datasets[0].data.length 
 
     }], 
 
     yAxes: [{ 
 
     ticks: { 
 
      beginAtZero:true 
 
     } 
 
     }] 
 
    } 
 
    } 
 
}); 
 
var myBar2 = new Chart(ctx2, { 
 
    type: 'bar', 
 
    data: barChartData2, 
 
    options: { 
 
    responsive: true, 
 
    scales: { 
 
     xAxes: [{ 
 
      barPercentage: 1, 
 
      categoryPercentage: 0.5/10 * barChartData2.datasets[0].data.length 
 
     }], 
 
     yAxes: [{ 
 
     ticks: { 
 
      beginAtZero:true 
 
     } 
 
     }] 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script> 
 
<canvas id="canvas1"></canvas> 
 
<canvas id="canvas2"></canvas>