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>

但是，当我选择 saab 选项然后更改为 volvo 选项时，不会呈现新图表 - 它是旧图表。

4

1 回答 1

0

问题是您为两个函数使用了相同的名称（processData），而JavaScript 不支持块作用域。所以函数的第二个定义总是被使用。

尝试将第二个函数名称更改为 processData1，它应该可以正常工作。

于 2015-06-16T14:17:11.027 回答