chart.js v2: Zaman ölçek etiketlerini, çubukların ortası ile hizalayın

Question

Üretilen zaman ölçeği etiketlerini, bir çubuk grafiğin çubuklarının ortası ile Chart.js v2.2 kullanarak hizalamaya çalışıyorum. OffsetGridLines seçeneğini denedim ancak bu Xaxis ölçek tipi zaman kullanırken hiçbir etkisi yok gibi görünüyor.

<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

belirlediğim min ve max değerlerini kaldırarak bir çalışma grafiği elde edebildi: Burada

belki kaçırmış bir şey, bir örnektir. İşte

JSFiddle

şu görüntü istenen sonucu oldu mu?

Answer 2

Bu keman çubuğu 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); 
       } 
       }); 
      }); 
      } 
     } 
     } 
    });