新 select 时未绘制新图表
Upon new select new chart isn't drawn
我正在使用以下脚本根据选项 selection 使用 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>
然而,当我 select saab 选项然后更改为 volvo 选项时,新图表不会呈现 - 它是旧图表。
问题是您在 JavaScript does not support block scope 时为两个函数使用了相同的名称 (processData)。所以函数的第二个定义一直在使用。
尝试将第二个函数名称更改为 processData1,它应该可以正常工作。
我正在使用以下脚本根据选项 selection 使用 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>
然而,当我 select saab 选项然后更改为 volvo 选项时,新图表不会呈现 - 它是旧图表。
问题是您在 JavaScript does not support block scope 时为两个函数使用了相同的名称 (processData)。所以函数的第二个定义一直在使用。
尝试将第二个函数名称更改为 processData1,它应该可以正常工作。