I am using the following script to draw line charts with canvasjs upon option selection :
<!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>
However when i select saab option and then change to volvo option the new chart isn't rendered - its the old one.
答案 0 :(得分：0)
问题是您在JavaScript does not support block scope时为两个函数使用了相同的名称（processData）。因此，总是使用函数的第二个定义。
尝试将第二个函数名称更改为processData1，它应该可以正常工作。