Question

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

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

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

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

编辑/更新：我发现了两种解决方法（但没有完美的解决方案），可以在尝试解决此问题时向图表添加页脚。万一有人遇到像我一样的问题，这里有一些解决方法的建议。

Nr。 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();`

在画布上添加div之后添加新的HTML元素 <div id=legendID></div>

Nr。 2：添加另一个数据集，该数据集为空，但包含应显示的信息的标签。 borderColor和backgroundColor设置为透明。添加一些空标签（“”）可以在标签和添加的页脚之间留出一定的距离。这种解决方法的缺点是样式的可能性有限。

Nr。 3：ana liza的解决方案。由于添加的信息在.png上可见，因此这最终对我的情况最有效。

Answer 1

来自官方docs：

标签轴

创建图表时，您想告诉查看者他们正在查看哪些数据。为此，您需要标记轴。

刻度标签配置嵌套在scaleLabel键中的刻度配置下。它定义了比例标题的选项。请注意，这仅适用于直角坐标轴。

您可以为两个轴添加标签，但是在您的情况下，由于仅在x-axis上需要它，因此图表options应该看起来与此类似。

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

Chart.js，向图表添加页脚

1 个答案: