chart.js v2：棒グラフの中央に時間尺度ラベルを整列する

Question

Chart.js v2.2を使用して生成された時間軸ラベルを棒グラフの棒の中心に揃えようとしています。 offsetGridLinesオプションを試しましたが、これはXaxisスケールタイプの時間を使用しても効果がないようです。私はセットminとmax値を除去することにより、作業のチャートを得ることができた

<div id="container" style="width: 75%;"> 
    <canvas id="canvas"></canvas> 
</div> 
<script> 
    var barChartData = { 
     labels: ["2015-01-01", "2015-02-01", "2015-03-01", "2015-04-01", "2015-05-01", "2015-07-01"], 
     datasets: [{ 
      label: 'Dataset 1', 
      backgroundColor: "rgba(220,220,220,0.5)", 
      data: [10, 4, 5, 7, 2, 3] 
     }] 

    }; 

    window.onload = function() { 
     var ctx = document.getElementById("canvas").getContext("2d"); 
     window.myBar = new Chart(ctx, { 
      type: 'bar', 
      data: barChartData, 
      options: { 
       elements: { 
        rectangle: { 
         borderWidth: 2, 
         borderColor: 'rgb(0, 255, 0)', 
         borderSkipped: 'bottom' 
        } 
       }, 
       responsive: true, 
       legend: { 
        position: 'top', 
       }, 
       title: { 
        display: true, 
        text: 'Chart.js Bar Chart' 
       } 
      , 
       scales: { 
        xAxes: [{ 
        categoryPercentage: .5, 
        barPercentage: 1, 
        type: 'time', 
        scaleLabel: { 
         display: true, 
         labelString: 'Year-Month' 
        }, 
        time: { 
         min: '2014-12-01' , 
         max: '2015-12-01', 
         unit: 'month', 
         displayFormats: { 
         month: "MMM YY" 
         } 
        }, 
        gridLines: { 
         offsetGridLines: false, 
         drawTicks: true, 
         display: true 
        }, 
        stacked: true 
        }], 
        yAxes: [{ 
        ticks: { 
         beginAtZero: true 
        }, 
        stacked: true 
        }] 
       } 
      } 
     }); 

    }; 


</script> 

Answer 1

：ここ

は一例であり、多分私が何かを見逃しています。ここで

はJSFiddle

が望ましい結果、以下の画像ましたか？

Answer 2

このバイオリンはバー https://jsfiddle.net/tea8dhgy/

<div id="container" style="width: 75%;"> 
    <canvas id="canvas"></canvas> 
</div>  
var barChartData = { 
     labels: ["2015-01-01", "2015-02-01", "2015-03-01", "2015-04-01", "2015-05-01", "2015-07-01"], 
     datasets: [{ 
     label: 'Dataset 1', 
     backgroundColor: "rgba(220,220,220,0.5)", 
     data: [10, 4, 5, 7, 2, 3] 
     }] 

    }; 


    var ctx = document.getElementById("canvas").getContext("2d"); 
    new Chart(ctx, { 
     type: 'bar', 
     data: barChartData, 
     options: { 
     elements: { 
      rectangle: { 
      borderWidth: 2, 
      borderColor: 'rgb(0, 255, 0)', 
      borderSkipped: 'bottom' 
      } 
     }, 
     responsive: true, 
     legend: { 
      position: 'top', 
     }, 
     title: { 
      display: true, 
      text: 'Chart.js Bar Chart' 
     }, 
     scales: { 
      xAxes: [{ 
      categoryPercentage: .5, 
      barPercentage: 1, 
      type: 'time', 
      scaleLabel: { 
       display: true, 
       labelString: 'Year-Month' 
      }, 
      time: { 
       // min: '2014-12-01' , 
       // max: '2015-12-01', 
       unit: 'month', 
       displayFormats: { 
       month: "MMM YY" 
       } 
      }, 
      gridLines: { 
       offsetGridLines: false, 
       drawTicks: true, 
       display: true 
      }, 
      stacked: true 
      }], 
      yAxes: [{ 
      ticks: { 
       beginAtZero: true 
      }, 
      stacked: true 
      }] 
     }, 
     animation: { 
      onComplete: function() { 
      var chartInstance = this.chart, 
       ctx = chartInstance.ctx; 

      ctx.font = Chart.helpers.fontString(10, "bold", Chart.defaults.global.defaultFontFamily); 
      ctx.textAlign = 'center'; 
      ctx.textBaseline = 'center'; 

      this.data.datasets.forEach(function(dataset, i) { 
       var meta = chartInstance.controller.getDatasetMeta(i); 
       meta.data.forEach(function(bar, index) { 
       //var data = dataset.data[index]; 
       var data = dataset.data[index]; 
       console.log(bar); 
       if (data > 0) { 
        ctx.fillText(data, bar._model.x, bar._model.base - (bar._model.base - bar._model.y)/2 - 5); 
       } 
       }); 
      }); 
      } 
     } 
     } 
    });