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

时间:2019-05-10 16:19:19

标签: 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);
});

这是保存图表的画布

<div class="chart-container">
<canvas id='canvas'  style='background-color:white;width: 100%;'></canvas>
</div>

这是我用来打开它的按钮

<button id='fs-doc-button'>Fullscreen</button>

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

所以,想知道我是否可以将这两种想法结合起来。

0 个答案:

没有答案