Question

我使用的是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选项。

图表.js的来源在第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

一切都很好。几乎总是，但由于某种原因，图表总是绘制在画布上，它看起来像这样。

老实说，我还为图表编写了一个扩展名，它只是绘制了背景和一条在此图表中看不到的线条。

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

两个辅助函数drawLine和drawTextBG定义如下

function drawLine(ctx,x,y,xmin){
  ctx.beginPath();
  ctx.lineWidth = 2;
  ctx.strokeStyle = orange;
  ctx.moveTo(xmin, y);
  ctx.lineTo(x, y);
  ctx.stroke();
}

function drawTextBG(ctx, txt, font, x, y) {    
  ctx.save();
  ctx.font = font;
  ctx.textBaseline = 'top';
  ctx.fillStyle = orange;
  var width = ctx.measureText(txt).width;
  ctx.fillRect(x-width-10, y-1, width+20, parseInt(font, 10)+2);
  ctx.fillStyle = '#fff';
  ctx.fillText(txt, x, y+1);
  ctx.restore();
}

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

感谢所有对此感到烦恼的人。

Answer 1

这个问题没有真正的解决方案。我的问题是，我想在画布的100％高度上显示图表，这实际上工作得很好。我在chart.js的源代码中添加的唯一检查是不在x轴上绘制标签。但是对它们的计算保持不变，改变整个来源对我来说是痛苦和耗时的。所以我把这个想法抛在脑后，将所有标签设置为''（空）这对我来说仍然没有解决方案，但至少我发现一些解决方案有多简单。我还没有100％解决这个问题，但是其他人都知道，我正在寻找其他答案。

This is my new question.

Chart.js仅在画布顶部绘制

1 个答案: