Question

我正在使用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
    });
});

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

感谢您的任何建议

Answer 1

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

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

或

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

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

1 个答案: