问题描述:

I am trying to align the generated time scale labels using Chart.js v2.2 with the centre of the bars of a bar chart. I have tried the offsetGridLines option but this seems to have no effect when using Xaxis scale type time.

Here is an example, maybe I have missed something:

 <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>

相关阅读:
Top