如何运行特定的 javascript 文件来更新 gui答案

【问题标题】：How to run specific javascript files to update gui如何运行特定的 javascript 文件来更新 gui
【发布时间】：2015-01-01 11:14:49
【问题描述】：

我正在使用 Django。我的目标是在网页左侧显示一个特定的 Highcharts 图表以及不同图表的列表。单击左侧的每个链接（或按钮或其他任何内容）时，当前显示的图表将替换为单击的任何一个。

为此，每个 highcharts 图表都包含在其自己的 javascript 文件中。只需将它们添加到带有 id 的 div 标签中，图表就可以正常工作。但是我不知道如何在单击按钮时在它们之间进行交换。

这是我到目前为止所得到的： HTML 文件：

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script type="text/javascript" src="{% static "basic_bar.js" %}"></script>
        <script type="text/javascript" src="{% static "complex_bar.js" %}"></script>
    </head>
    <body>
        <div id="showBasic"></div>
        <input class="showBasic" type="button" value="Basic Chart" onclick="showBasic();"/>
        <input class="showComplex" type="button" value="Complex Chart" onclick="showComplex();"/>
    </body>
</html>

这是基本的 highcharts javascript 文件的一小部分：

$(function () {
    $('#showBasic').highcharts({
        //chart code
    });
});

目前，基本图表会在页面加载时显示，因为它在 id="showBasic" 的 div 标签中被引用。我不知道该怎么做是使用按钮在显示基本图表或复杂图表之间切换。我想我需要以某种方式将 div id="showBasic 改为 div id="showComplex"

感谢您的任何建议

【问题讨论】：

标签： javascript django highcharts

【解决方案1】：

一种方法是在您的页面上同时显示两个 div，并使用显示/隐藏来确保一次只显示一个。加载的 javascript 将呈现两个 highcharts，您可以简单地隐藏或显示正确的一个：

// Show Basic chart.
$('#showBasic').show();
$('#showComplex').hide();

或

// Show Complexchart.
$('#showBasic').hide();
$('#showComplex').show();

【讨论】：

感谢@SteveP 的建议。但是，这是否意味着我必须首先显示两个图表，每个图表都在自己的 div 中。然后通过单击我可以显示/隐藏特定图表的按钮？我只是不确定我是否理解我最初只会显示其中一个图表（即：在单击任何按钮之前）。谢谢。
哦，没关系，我只是想出了一个办法。我可以在每个 div 中添加一个脚本标签，默认图表为隐藏。再次感谢。
您也可以使用 css 隐藏 div 的初始状态 #showBasic { visibility: hidden; }。您还可以创建一个 css 类来隐藏它们：.hidden { display:none;} 并为您提供隐藏类。