Question

我有一个asp文件，它显示选择特定单选按钮的特定图表。它从DATABASE获取数据。图表是在选择每个单选按钮时生成的。在页面加载时，选择一个单选按钮，并显示其相关图表。但是，如果我在图表上多次点击，图表会自动更改并显示与其他单选按钮关联的图表，并进一步点击其他图表会显示相应的图表。

代码是：

<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>

这是我第一次使用Asp，所以我可能会遗漏一些非常明显的东西。不过，任何帮助都会受到赞赏。

chart.js点击图表加载新图表

0 个答案: