ChartJSは、単純なデータポイント

Question

のために表示されないにバーは、ここで私が使用しているシンプルなchart.js横棒グラフです：

var myBarChart = new Chart(ctx,{ 
    type: 'horizontalBar', 
    data: { 
    labels: [ 
     "Foo", 
     "Bar", 
     "Baz" 
    ], 
    datasets: [ 
    { 
     data: [725000, 600000, 900000], 
     backgroundColor: [ 
      "#ccf6ec", 
      "#ff6654", 
      "#009784" 
     ], 
     hoverBackgroundColor: [ 
      "#ccf6ec", 
      "#ff6654", 
      "#009784" 
     ] 
    }] 
    }, 
    options: { 
    legend: { 
     display: false 
    }, 
    scales: { 
     xAxes: [{ 
     display: false 
     }], 
     yAxes: [{ 
     display: false 
     }], 
    } 
    } 
}); 

---

私は寄りに値を変更した場合お互いに私は3つのバーを参照してください。値が大きく異なっていても、バーが常に見えるようにバーを描画する必要があります。

設定がありませんでしたか？これをどうすれば解決できますか？

Answer 1

何らかの理由で、chart.jsが最低のデータを最小ティックの値として使用しました（ほとんどの場合、データの値が原因です）。単にticks.min: 0を追加すると明らかに問題を解決します

var ctx = document.getElementById('chart') 
 
var myBarChart = new Chart(ctx, { 
 
    type: 'horizontalBar', 
 
    data: { 
 
    labels: [ 
 
     "Foo", 
 
     "Bar", 
 
     "Baz" 
 
    ], 
 
    datasets: [{ 
 
     data: [725000, 600000, 900000], 
 
     backgroundColor: [ 
 
     "#ccf6ec", 
 
     "#ff6654", 
 
     "#009784" 
 
     ], 
 
     hoverBackgroundColor: [ 
 
     "#ccf6ec", 
 
     "#ff6654", 
 
     "#009784" 
 
     ] 
 
    }] 
 
    }, 
 
    options: { 
 
    legend: { 
 
     display: false 
 
    }, 
 
    scales: { 
 
     xAxes: [{ 
 
     display: false, 
 
     ticks: { 
 
      min: 0 
 
     } 
 
     }], 
 
     yAxes: [{ 
 
     display: false 
 
     }], 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<canvas id="chart" width="400" height="400"></canvas>