全屏 Chart.js,同时保持图表质量

lSt*_*lov 5 javascript jquery chart.js

我有 Chart.js。当尺寸较小时,它看起来不错,但我还为图表实现了全屏选项。

它按预期打开,但全屏时图表的质量很差,因为它只是将小地图大小调整为全屏。

知道如何在全屏打开时以更大的尺寸再次调用图表吗?

这是我用来打开全屏的JS

function toggleFullscreen(elem) {
  var elem = document.getElementById("canvas");
  if (!document.fullscreenElement && !document.mozFullScreenElement &&
  !document.webkitFullscreenElement && !document.msFullscreenElement) {
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    } else if (elem.mozRequestFullScreen) {
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

document.getElementById('fs-doc-button').addEventListener('click', function () {
  toggleFullscreen('#canvas');
});

document.getElementById('W').addEventListener('click', function () {
  toggleFullscreen(this);
});
Run Code Online (Sandbox Code Playgroud)

这是保存图表的画布

<div class="chart-container">
<canvas id='canvas'  style='background-color:white;width: 100%;'></canvas>
</div>
Run Code Online (Sandbox Code Playgroud)

这就是我打开它的按钮

<button id='fs-doc-button'>Fullscreen</button>
Run Code Online (Sandbox Code Playgroud)

我唯一能想到的就是创建一个具有更大图表尺寸的新隐藏画布并全屏打开它,但对我来说听起来很脏:)

所以,我想知道我能以某种方式结合这两个想法。