バーが重ね：「時間」

Question

私はX軸は時間を表した棒グラフを構築しようとしています。私はオプションxAxes: [{type: 'time'}]を使用する場合

はしかし、バーは奇妙なレンダリング作り、重ね合わせる始めます。オプションを削除する場合

、バーが正しく表示されますが、X軸ラベルは、私が何かをしないのです日付

として表示されない、またはそれはバグですか？

デモhere

Answer 1

chartjsは右の動的Xスケール上のバーの幅を取得タフな時間を持っているように見えます。あなたが望むものを達成するための素早い方法は、通常のカテゴリスケールをx軸上で使用し、表示時にラベルをフォーマットすることです。それを行うにはoptionsのようになります。 ticksで

options: { 
    scales: { 
     xAxes: [{ 
     ticks: { 
      userCallback: function(label, index, labels) { 
      return moment(label, "YYYYMMDD").format("MMM DD, YYYY"); 
      }, 
     }, 
     }], 
    } 
    } 

userCallback機能はちょうどあなたが欲しいしかし、あなたがそれをフォーマットすることができますので、文字列を返すことがあります。

var labels = ["20170601", "20170602", "20170403", "20170503", "20170703", "20170404", "20170504", "20170704", "20170405", "20170505", "20170605", "20170705", "20170406", "20170606", "20170607", "20170608", "20170509", "20170609", "20170510", "20170511", "20170412", "20170512", "20170612", "20170413", "20170613", "20170414", "20170614", "20170515", "20170615", "20170516", "20170616", "20170517", "20170418", "20170518", "20170419", "20170519", "20170619", "20170420", "20170620", "20170421", "20170621", "20170522", "20170622", "20170523", "20170623", "20170424", "20170524", "20170425", "20170426", "20170526", "20170626", "20170427", "20170627", "20170328", "20170428", "20170628", "20170329", "20170529", "20170629", "20170330", "20170530", "20170630", "20170331", "20170531"], 
 
    values = [5.79, 7.41, 7.08, 7.25, 7.46, 6.79, 7.01, 5.38, 7.35, 7.4, 7.1, 0.49, 7.57, 5.63, 4.15, 7.32, 5.55, 5, 3.26, 6.78, 2.75, 7.27, 7.33, 5.69, 7.1, 7.28, 6.85, 7.27, 6.4, 6.8, 6.9, 7.19, 3.97, 7.11, 6.89, 6.6, 4.03, 7.11, 5.49, 5.31, 2.43, 6.09, 6.14, 5.4, 3.7, 7.13, 5.72, 5.56, 5.4, 7.18, 7.08, 7.19, 7.39, 5.38, 6.96, 7.16, 5.34, 7.21, 5.98, 7.05, 7.32, 3.23, 6.88, 6.86]; 
 

 
var ctx = document.getElementById("chart"); 
 
var myChart = new Chart(ctx, { 
 
    type: 'bar', 
 
    data: { 
 
    labels: labels, 
 
    datasets: [{ 
 
     label: "Time", 
 
     data: values, 
 
    }] 
 
    }, 
 
    options: { 
 
    scales: { 
 
     xAxes: [{ 
 
     ticks: { 
 
      userCallback: function(label, index, labels) { 
 
      return moment(label, "YYYYMMDD").format("MMM DD, YYYY"); 
 
      }, 
 
     }, 
 
     }], 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<div id="chart-wrapper"> 
 
    <canvas id="chart"></canvas> 
 
</div>