Question

我遇到的问题是我有5个不同的图表同时加载随机生成的数据导致应用程序运行缓慢。应用程序的目的是让用户选择他想要查看的图表，所有其他图表应该空闲（事实并非如此）......

我开始相信，因为我在index.html中包含了图表（diagram1.js，diagram2.js等），这可能是应用程序变慢的原因，因为一切都会立即加载。我只使用JQuery来显示或隐藏依赖于点击的图表。

如何让用户只看到一个图表，并保持其余的空闲（没有传入数据），直到选中它们为止？

这包含在index.html中，<body>内，<div id = "diagram4"></div>负责显示图表。

<script src="diagram1.js"></script>
<script src="diagram2.js"></script>
<script src="diagram3.js"></script>
<script src="diagram4.js"></script>
<script src="diagram5.js"></script>

这是包含图表内容的diagram4.js，请记住我没有包含整个代码来节省本文档中的空间。

$(window).on("load", function() {
        var chart = new CanvasJS.Chart("diagram4",
        { 
           // Code.. 
        }); 
});

这是处理点击的JQuery事件。当用户点击diagram4时，弹出diagram4。

    $('[data-row]').on('click', function() {
        var row = $(this).attr('data-row');
         $('.active').removeClass('active');
         $('#table' + row).addClass('active');
    });

Answer 1

不是在加载页面时创建所有图表（$(window).on("load", ...)），而是可以使用附加的onclick处理程序提供4个div等，这将在单击时呈现图表。您可以在div中放置一些信息文本甚至图表的符号图片。

同步数据会降低应用程序的速度

1 个答案: