独立于 ChartJS 中的图例调整图表大小以供 Canvas 下载

Question

我的应用程序创建和下载的一些图表可能具有非常大的图例。在这种情况下，我们的想法是创建（理想情况下通过 ChartJs - 就像关联图表的情况一样）并下载专用的 canvas/image 显示图表的完整图例。

到目前为止，我已经能够通过将比例设置为显示来“隐藏”图表：false 例如

options: {
  scales: {
    x: {
      display: false
    },
    y: {
      display: false
    }

这成功地阻止了图表的显示，但是 canvas 似乎仍然为图表分配了一半的空间，例如

有什么方法可以让图表的 space 变小（甚至根本不显示它！）允许更多 space 用于图例？

游乐场在这里： https://jsfiddle.net/ShallDev2018/7bdnjsw9/16/

注意：HtmlLegend 不是此处的选项，因为此 canvas 的唯一目的是用于下载。

Answer 1

经过一番折腾，我找到了解决问题的方法。

碰巧的是，ChartJs 为图例设置了默认的最大宽度（尽管它没有在文档中指定）。通过将图例最大宽度设置为较高的值，图例可以假设整个 canvas 例如

legend: {
  position: 'left',
  align: 'start',
  fullSize: false,
  labels: {
    font: {
      size: 12
    },
    padding: 10
  },
  maxWidth: 9999
}

独立于 ChartJS 中的图例调整图表大小以供 Canvas 下载

Resize Chart Independently From Legend in ChartJS for Canvas Download

javascript

canvas

charts

chart.js

legend