0

次のスクリプトを使用して、オプションの選択時に canvasjs で折れ線グラフを描画しています。

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery-2.1.4.min.js"></script>
<select id="option">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>
<script type="text/javascript">
$(document).ready(function () {
$("#option").change(function(){
    var i = $(this).val();
    if(i == "volvo"){
    $.ajax({
                    type: "GET",
                    url:"proba1.csv",
                    dataType: "text",
                    success: function(data) {processData(data);}
            });
            function processData(allText) {
                var allLinesArray = allText.split('\r\n');
                if(allLinesArray.length>0){
                        var dataPoints = [];
                        for (var i = 1; i <= allLinesArray.length-1; i++) {
                                var rowData = allLinesArray[i].split(';');
                                dataPoints.push({label:rowData[0],y:parseInt(rowData[1])});
                        }
                        drawChart(dataPoints);                       
                }
            }
        function drawChart(dataPoints) {
                var chart = new CanvasJS.Chart("chartContainer", {
                theme: "theme2",
                zoomEnabled:true,
                title:{
                        text: "RPM"
                },
                legend: {
                horizontalAlign: "right",
                verticalAlign: "center"
                },
                data: [
                {
                        type: "line",
                        dataPoints: dataPoints
                }]
                });

                chart.render();
        }
    }
    if(i == "saab"){
        $.ajax({
                    type: "GET",
                    url:"proba1.csv",
                    dataType: "text",
                    success: function(data) {processData(data);}
            });
            function processData(allText) {
                var allLinesArray = allText.split('\r\n');
                if(allLinesArray.length>0){
                        var dataPoints1 = [];
                        for (var i = 1; i <= allLinesArray.length-1; i++) {
                                var rowData = allLinesArray[i].split(';');
                                dataPoints1.push({label:rowData[0],y:parseInt(rowData[2])});
                        }
                        drawChart1(dataPoints1);                       
                }
            }
        function drawChart1(dataPoints1) {
                var chart1 = new CanvasJS.Chart("chartContainer", {
                theme: "theme2",
                zoomEnabled:true,
                title:{
                        text: "RPM"
                },
                legend: {
                horizontalAlign: "right",
                verticalAlign: "center"
                },
                data: [
                {
                        type: "line",
                        dataPoints: dataPoints1
                }]
                });

                chart1.render();
        }
    }
    });
});

</script>
<script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<div id="chartContainer" style="height: 300px; width:100%;"></div>
<center><b>This is a test text</b></center>
</body>
</html>

ただし、サーブ オプションを選択してからボルボ オプションに変更すると、新しいチャートはレンダリングされません。古いチャートです。

4

1 に答える 1

0

問題は、 JavaScript がブロック スコープをサポートしていないときに、2 つの関数に同じ名前 (processData) を使用したことです。そのため、関数の 2 番目の定義が常に使用されています。

2 番目の関数名を processData1 に変更してみてください。正常に動作するはずです。

于 2015-06-16T14:17:11.027 に答える