小编wen*_*nzf的帖子

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

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

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

`options: { ... 
  footer: {
    display: true,
    text: 'data from xy'
  }
}`
Run Code Online (Sandbox Code Playgroud)

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

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

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();` 
Run Code Online (Sandbox Code Playgroud)

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

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

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

javascript chart.js

7
推荐指数
1
解决办法
926
查看次数

使用 Zustand/React 获取多个状态(简写语法)

在状态更改时重新渲染方面,从Zustand存储获取状态的两种方式是否相同?

文档中描述的方法:

const nuts = useStore(state => state.nuts)
const honey = useStore(state => state.honey)
Run Code Online (Sandbox Code Playgroud)

速记:

const { nuts, honey } = useStore()
Run Code Online (Sandbox Code Playgroud)

reactjs zustand

7
推荐指数
2
解决办法
8551
查看次数

标签 统计

chart.js ×1

javascript ×1

reactjs ×1

zustand ×1