javascript – Chart.js,在图表中添加页脚

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

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

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

我在文档中提到了几次“页脚”以及在“工具提示”的上下文中使用它的方式或者使用它,但是没有看到任何具体如何添加它的内容.

编辑/ UPDATE：
我找到了两个解决方法(但没有完美的解决方案)在尝试解决此问题时向图表添加页脚.如果有人像我一样遇到同样的问题,这里有一些建议如何解决这个问题.

NR. 1：添加HTML元素.此解决方法的缺点是,如果用户将图表下载为.png,则不会显示添加的HTML元素.也许这是最好的解决方案,则不必显示该元素.

`var myChart = new Chart(ctx,{
  type: 'line',data: { ... },options: {
   legend: { ... },... 
   legendCallback: function(){
    return '

在画布上添加一个div来附加新的HTML元素
    < div id = legendID>< / div>

NR. 2：添加另一个空的数据集,但是包含应该显示的信息的标签. borderColor和backgroundColor设置为透明.添加一些空标签(“”)会在标签和添加的页脚之间留出一些距离.这种解决方法的缺点是造型的可能性有限.

NR. 3：ana liza的解决方案.这最终适用于我的情况,因为添加的信息在.png上可见.

最佳答案

从官方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轴上,所以您的图表选项应该与此类似.

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

原文地址：https://www.jb51.cc/js/429291.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。