Javascript Chart.js仅在画布顶部绘制

我使用的是经过轻微修改的chart.js版本，我的全局视图如下所示

var barChartDemo = new Chart(ctx).Linechart(barChartData, {
  responsive: true,
  scaleShowHorizontalLines: false,
  scaleShowVerticalLines: false,
  tooltipYPadding : 8,
  animateScale : true,
  animationEasing : "easeOutBounce",
  pointDotRadius : 3,
  pointDotStrokeWidth: 3,
  tooltipCornerRadius : 0,
  tooltipFillColor : 'rgba(0,160,0,0.8)',
  scaleLineColor : 'transparent',
  scaleFontSize : 16,
  scaleFontColor : '#8ba2b0',
  scaleFontStyle : 'bold',
  showXAxisLabel:false,
  bezierCurve:false,
  datasetStrokeWidth:3
});

您可以看到我添加的showXAxisLabel选项

P.> J.S.的来源在第1678行中间的某个地方被修改了，看起来是这样的。

if(this.showXAxisLabel){ // just added this check
  ctx.save();
  ctx.translate(xPos, (isRotated) ? this.endPoint + 12 : this.endPoint + 8);
  ctx.rotate(toRadians(this.xLabelRotation) * -1);
  ctx.font = this.font;
  ctx.textAlign = (isRotated) ? "right" : "center";
  ctx.textBaseline = (isRotated) ? "middle" : "top";
  ctx.fillText(label, 0, 0);
  ctx.restore();
} // and this closing bracket

一切正常。几乎总是，但出于某种原因，图表总是画在画布上，看起来是这样的

if(this.showXAxisLabel){ // just added this check
  ctx.save();
  ctx.translate(xPos, (isRotated) ? this.endPoint + 12 : this.endPoint + 8);
  ctx.rotate(toRadians(this.xLabelRotation) * -1);
  ctx.font = this.font;
  ctx.textAlign = (isRotated) ? "right" : "center";
  ctx.textBaseline = (isRotated) ? "middle" : "top";
  ctx.fillText(label, 0, 0);
  ctx.restore();
} // and this closing bracket

老实说，我还为这个图表写了一个扩展，它只是画了背景和一条在这个图表中不可见的线

Chart.types.Line.extend({
  name: 'Linechart',
  initialize: function(data){
    Chart.types.Line.prototype.initialize.apply(this, arguments);
    this.originalClear = this.clear;
    this.clear = function () {
      var datasets = this.datasets[0];
      var barHeight = 30;
      this.originalClear();
      var x = this.scale.calculateX(0)-5;
      var xmax = this.scale.calculateX(datasets.points.length)-x;

      this.chart.ctx.fillStyle = '#fff';

      var i = 0;
      var odd = false;

      while(i<180){
        if(!odd)                    
          this.chart.ctx.fillRect(x, i, xmax, barHeight);

        ctx.beginPath();
        ctx.lineWidth = 1;
        ctx.strokeStyle = "#cacbcc";
        ctx.moveTo(x-3, i);
        ctx.lineTo(xmax+5, i);
        ctx.stroke();

        odd = !odd;
        i = i+barHeight;
      }

      i = x;
      while(i < ctx.canvas.width){
        ctx.beginPath();
        ctx.lineWidth = 0.5;
        ctx.strokeStyle = "#cacbcc";
        ctx.moveTo(i, 0);
        ctx.lineTo(i, 180);
        ctx.stroke();
        i=i+50;
      }
    }
  },
  draw: function (ease) {
    var points = this.datasets[0].points;
    var y = this.scale.calculateY(goalLine);
    var x = this.scale.calculateX(points.length);
    var xmin = this.scale.calculateX(0)-5;
    Chart.types.Line.prototype.draw.apply(this);
    drawLine(ctx,x,y,xmin);
    drawTextBG(ctx,goalLabel,font,x/3,y-12/2);
  }
});

你能告诉我为什么图表是这样画的吗？另一个问题是，如果图表的y值高于数据集的最大值，是否有可能扩展图表区域以适应这条线

---

感谢每一个为此烦恼的人。

这个问题没有真正的解决办法。我的问题是，我想在画布的100%高度上显示图表，这实际上非常有效。我在chart.js源代码中添加的唯一检查是不在x轴上绘制标签。但是他们的计算结果仍然是一样的，改变整个来源对我来说是痛苦和耗时的。所以我放弃了这个想法，把所有的标签都设置为“”（空）。这对我来说仍然不是解决方案，但至少我发现了一些解决方案有多简单。这对我来说还不是100%解决的，但让其他人知道，我正在寻找其他答案

---

您可能想在修改后的Chart.js、扩展名和数据上设置一个小摆设。干杯哦，好的，马上就好。谢谢你的提示！所以，我不得不发布另一个问题。当我发现自己的问题出在标签上（尽管没有显示）时，我结束了这篇文章。谢谢你的时间！