Question

我想在所有图表图形后面的ChartJS中心添加一个信息性背景文本。除了使用如下所示的图像，还有其他方法：How can i add an image as background in Chartjs?吗？

此致

Answer 1

尝试这个

<div>
   <span class='title'>TITLE GOES HERE</span>
   <canvas id="bar" width="390" height="225"></canvas>
</div>


CSS : 
canvas {    
  display:inline;
}
.title {
    font-size: 47px;
    font-weight: bold;
    opacity: 0.2;
    z-index: -1;
    margin-top: 20px;
    position: absolute;
}

Answer 2

您可以扩展Chart的{{1}}函数以向图表添加文本。然后，您可以根据图表的呈现方式，通过计算图表中间的x和y值或指定它们的值来控制文本的位置：

draw()

以下是演示此内容的代码段：

let myLineExtend = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
  draw: function() {
    myLineExtend.apply(this, arguments);
    // text styles below
    this.chart.chart.ctx.textAlign = "center"
    this.chart.chart.ctx.font = "20px Arial black";
    this.chart.chart.ctx.fillText("Lorem Ipsum Blah Blah", 300, 150)  // text, x-pos, y-pos
  }
});

let myLineExtend = Chart.controllers.line.prototype.draw;

let options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  }
}

let ctx = document.getElementById('container').getContext('2d');
Chart.helpers.extend(Chart.controllers.line.prototype, {
  draw: function() {
    myLineExtend.apply(this, arguments);
    this.chart.chart.ctx.textAlign = "center"
    this.chart.chart.ctx.font = "20px Arial black";
    this.chart.chart.ctx.fillText("Lorem Ipsum Blah Blah", 300, 150)
  }
});

new Chart(ctx, options);

在ChartJS中添加背景文本

2 个答案: