javascript - Chart.js，向图表添加页脚

Question

使用 Chart.js 2.0。我正在寻找一种在图表底部添加页脚(文本行)以显示数据源的方法。

我尝试通过选项对象来解决它，与包含和修改标题和图例的方式相同。像这样:

`options: { ... 
  footer: {
    display: true,
    text: 'data from xy'
  }
}`

我看到文档中多次提到“页脚”以及设置样式或在“工具提示”上下文中使用它的方法，但还没有看到任何具体的添加方法。

编辑/更新:在尝试解决此问题时，我找到了两种解决方法(但没有完美的解决方案)来向图表添加页脚。如果有人像我一样遇到同样的问题，这里有一些解决方法的建议。

编号。 1:添加一个HTML元素。此解决方法的缺点是，如果用户将图表下载为 .png，则不会显示添加的 HTML 元素。也许这是最好的解决方案，如果用户将图表下载为 .png 时元素不必可见。

`var myChart = new Chart(ctx, {
  type: 'line',
  data: { ... },
  options: {
   legend: { ... },
   ... 
   legendCallback: function(){
    return '<p>bla bla</p>';
   },
  ...
 },
});
document.getElementById('legendID').innerHTML = 
myChart.generateLegend();` 

在 Canvas 之后添加一个 div 以附加新的 HTML 元素 <div id=legendID></div>

编号。 2:添加另一个空的数据集，但标签包含应该显示的信息。 borderColor 和 backgroundColor 设置为透明。添加一些空标签 ("") 会在标签和添加的页脚之间提供一些距离。此解决方法的缺点是样式的可能性有限。

编号。 3:ana liza的解决方案。这最终最适合我的情况，因为添加的信息在 .png 上可见。

Answer 1

来自官方docs :

Labeling Axes

When creating a chart, you want to tell the viewer what data they are viewing. To do this, you need to label the axis.

The scale label configuration is nested under the scale configuration in the scaleLabel key. It defines options for the scale title. Note that this only applies to cartesian axes.

您可以为两个轴添加标签，但在您的情况下，因为您只需要在 x 轴 上添加标签，您的图表 options 应该类似于此。

var options = {
  scales: {
    xAxes: [
      {
        scaleLabel: {
          display: true,
          labelString: 'Party size',
          fontColor: '#C7C7CC',
          fontSize: 11
        }
      }
    ]
  }
};