Javascript chart.js单击图表加载新图表
我有一个asp文件，在选择特定单选按钮时显示特定图表。它从数据库中获取数据。在选择每个单选按钮时生成图表。 加载页面时，选择一个单选按钮，并显示其相关图表。 但如果我在图表上多次单击，图表会发生变化，并自动显示与其他单选按钮关联的图表，再单击其他图表会显示相应的图表 代码是：Javascript chart.js单击图表加载新图表,javascript,charts,asp-classic,Javascript,Charts,Asp Classic,我有一个asp文件，在选择特定单选按钮时显示特定图表。它从数据库中获取数据。在选择每个单选按钮时生成图表。 加载页面时，选择一个单选按钮，并显示其相关图表。 但如果我在图表上多次单击，图表会发生变化，并自动显示与其他单选按钮关联的图表，再单击其他图表会显示相应的图表 代码是： 选择类型： 一个 两个 三 关于（）的函数{ var fil=； var-tot=； 图表（fil、tot）； } 功能图（fil、tot）{ var
选择类型：
一个
两个
三
关于（）的函数{
var fil=；
var-tot=；
图表（fil、tot）；
}
功能图（fil、tot）{
var ctx=document.getElementById（“myChart”）；
var myChart=新图表（ctx{
类型：'bar'，
数据：{
标签：fil，
数据集：[{
标签：'Distinct'，
数据：tot，
背景颜色：[
“#FF6384”，
“#36A2EB”，
“#FFCE56”
]
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});
}
功能图2（fil、tot）{
var ctx=document.getElementById（“myChart”）；
var myLineChart=图表线（ctx{
键入：“行”，
数据：{
标签：fil，
数据集：[{
标签：'Distinct'，
数据：tot，
背景颜色：“rgba（75192192,0.4）”
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});
}
功能图3（fil、tot）{
var ctx=document.getElementById（“myChart”）；
var myDoughnutChart=Chart.Doughnut（ctx{
键入：“甜甜圈”，
数据：{
标签：fil，
数据集：[{
标签：'Distinct'，
数据：tot，
背景颜色：[
“#FF6384”，
“#36A2EB”，
“#FFCE56”
]
}]
},
选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});
}
函数绘图图（）{
if（document.getElementById（“radio-choice-c”）.选中）{
var fil=；
var-tot=；
图表（fil、tot）；
}
if（document.getElementById（“radio-choice-d”）。选中）{
var fil=；
var-tot=；
图表2（fil、tot）；
}
if（document.getElementById（“radio-choice-e”）.选中）{
var fil=；
var-tot=；
图表3（fil、tot）；
}
}
<html>
<body onload="on()">
<form id="form1" method="post">
<div>
<fieldset >
<div>
<legend style="font-size: large;">Select Type:</legend>
<br>
<input type="radio" name="radio-choice-b" id="radio-choice-c" value="one" onclick="drawchart()" >
<label for="radio-choice-c">one</label>
<input type="radio" name="radio-choice-b" id="radio-choice-d" value="two" onclick="drawchart()">
<label for="radio-choice-d">two</label>
<input type="radio" name="radio-choice-b" id="radio-choice-e" value="three" onclick="drawchart()">
<label for="radio-choice-e">three</label>
</div>
</fieldset>
</div>
<br>
<canvas id="myChart" width="400" height="400"></canvas>
<% ASP DB CONNECTION%>
<script>
function on(){
var fil=<%= filter %>;
var tot=<%= total%>;
chart(fil,tot);
}
function chart(fil,tot){
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: fil,
datasets: [{
label: 'Distinct',
data: tot,
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
function chart2(fil,tot){
var ctx = document.getElementById("myChart");
var myLineChart = Chart.Line(ctx, {
type: 'line',
data: {
labels: fil,
datasets: [{
label: 'Distinct',
data: tot,
backgroundColor: "rgba(75,192,192,0.4)"
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
function chart3(fil,tot){
var ctx = document.getElementById("myChart");
var myDoughnutChart = Chart.Doughnut(ctx, {
type: 'doughnut',
data: {
labels: fil,
datasets: [{
label: 'Distinct',
data: tot,
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
}
function drawchart(){
if(document.getElementById("radio-choice-c").checked){
var fil=<%= filter %>;
var tot=<%= total%>;
chart(fil,tot);
}
if(document.getElementById("radio-choice-d").checked){
var fil=<%= b_filter %>;
var tot=<%= b_total%>;
chart2(fil,tot);
}
if(document.getElementById("radio-choice-e").checked){
var fil=<%= c_filter %>;
var tot=<%= c_total%>;
chart3(fil,tot);
}
}
</script>
</body>
</html>