chart.js v2：将时间刻度标签与条形的中心对齐

Question

我正在尝试使用Chart.js v2.2将生成的时间刻度标签与条形图的条形图的中心对齐。 我已经尝试过offsetGridLines选项，但是使用Xaxis比例类型时间似乎无效。

这是一个示例，也许我错过了一些东西：

   <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

通过删除设置的min和max我可以获得工作表。

这是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);
                }
              });
            });
          }
        }
      }
    });