gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:51:10 26 4
gpt4 key购买 nike

我正在使用 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"

感谢您的建议

最佳答案

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

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

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

关于javascript - 如何运行特定的 javascript 文件来更新 gui,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26754212/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com