时间戳

首页 > 解决方案 > Charts.JS - 图表太多？- 加载问题

javascript - Charts.JS - 图表太多？- 加载问题

问题描述

我在仪表板上的页面上加载了 60 多个图表。在桌面上它可以工作，但在移动设备上偶尔重新加载所有图表都会消失，必须重新加载才能可见。

如果我删除大部分图表，这个问题似乎就消失了。

是否有使用charts.js 加载60 多个图表的正确方法？

有什么建议吗？

这是我的设置示例：

new Chart(document.getElementById("doughnut-chart"), {
type: 'doughnut',
data: {
labels: ["Seeker", "Rock", "Examiner", "Uniter", "Counselor"],
datasets: [
{
label: "",
backgroundColor: ["#ff4757", "#8e44ad","#3c40c6","#2ed573","#f9ca24"],
data: [seekerNum, rockNum, examinerNum, uniterNum, counselorNum]
}
]
},
options: {
maintainAspectRatio: false,
beginAtZero: true,
title: {
display: true,
text: 'Your Personality Score'
}
}
});

前端：

<div class="col-lg-6 col-sm-12">
<p class='largeBodyText'> Chart #1: </p>

<canvas id="doughnut-chart" width="1000" height="1000"></canvas>

</div>

标签： javascriptjquerymobilechartschart.js

解决方案

我的解决方案是将 60 多个图表分成 3 页。我很想知道错误的原因，但将它们分开完全解决了加载问题。如果有人知道charts.js 推荐的一页上的最大图表，请随时分享！

推荐阅读