我一直在寻找与<!DOCTYPE html>
<html>
<head>
<script>
function validateform() {
var status = true;
var f = document.forms["myForm"]["fname"];
var l = document.forms["myForm"]["lname"];
var a = document.forms["myForm"]["age"];
var g = document.forms["myForm"]["gender"];
var m = document.forms["myForm"]["mobile"];
var u = document.forms["myForm"]["uname"];
if (f.value == "") {
document.getElementById("fname-error").innerHTML = "Please Enter your First
Name";
document.getElementById("fname-error").style.color = "Red";
status = false;
} else {
document.getElementById("fname-error").innerHTML = "Valid First Name";
document.getElementById("fname-error").style.color = "Green";
status = true;
}
if (l.value == "") {
document.getElementById("lname-error").innerHTML = "Please Enter your Last
Name";
document.getElementById("lname-error").style.color = "Red";
status = false;
} else {
document.getElementById("lname-error").innerHTML = "Valid Last Name";
document.getElementById("lname-error").style.color = "Green";
status = true;
}
if (a.value == "") {
document.getElementById("age-error").innerHTML = "Please Enter your age";
document.getElementById("age-error").style.color = "Red";
status = false;
} else {
document.getElementById("age-error").innerHTML = "Age Selected";
document.getElementById("age-error").style.color = "Green";
status = true;
}
if (g.value == "") {
document.getElementById("gender-error").innerHTML = "Please select your
gender";
document.getElementById("gender-error").style.color = "Red";
status = false;
} else {
document.getElementById("gender-error").innerHTML = "Gender Selected";
document.getElementById("gender-error").style.color = "Green";
status = true;
}
if (m.value.length < 10 || m.value.length > 10) {
document.getElementById("mobile-error").innerHTML = "Please Enter a valid
Mobile Number";
document.getElementById("mobile-error").style.color = "Red";
status = false;
} else {
document.getElementById("mobile-error").innerHTML = "Valid Mobile Number";
document.getElementById("mobile-error").style.color = "Green";
status = true;
}
if (u.value == "") {
document.getElementById("uname-error").innerHTML = "Please Choose a
Username";
document.getElementById("uname-error").style.color = "Red";
status = false;
} else {
document.getElementById("uname-error").innerHTML = "Valid Username";
document.getElementById("uname-error").style.color = "Green";
status = true;
}
return true;
}
function checkPass(passId) {
if (/^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{6,16}$/.test(passId)) {
document.getElementById("pass1-error").innerHTML = "You have entered valid
Password.";
document.getElementById("pass1-error").style.color = "Green";
return true;
}
return false;
}
function ValidatePassid() {
var passID = document.forms["myForm"]["passid1"];
if ((passID.value == null) || (passID.value == "")) {
document.getElementById("pass1-error").innerHTML = "Please Enter your
password";
document.getElementById("pass1-error").style.color = "Red";
passID.focus();
return false;
}
if (checkPass(passID.value) == false) {
passID.value = "";
document.getElementById("pass1-error").innerHTML = "Invalid Password";
document.getElementById("pass1-error").style.color = "Red";
passID.focus();
return false;
}
return true;
}
function Validate() {
var pass1 = document.forms["myForm"]["passid1"];
var pass2 = document.forms["myForm"]["passid2"];
if (pass1.value != pass2.value) {
document.getElementById("pass2-error").innerHTML = "Passwords do not
match.";
document.getElementById("pass2-error").style.color = "Red";
return false;
} else {
document.getElementById("pass2-error").innerHTML = "Passwords match.";
document.getElementById("pass2-error").style.color = "Green";
return true;
}
return true;
}
function checkEmail(emailId) {
if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(emailId)) {
document.getElementById("email-error").innerHTML = ("You have entered a
valid email");
document.getElementById("email-error").style.color = "Green";
return true;
}
return false;
}
function ValidateEmail() {
var emailID = document.forms["myForm"]["email"];
if ((emailID.value == null) || (emailID.value == "")) {
document.getElementById("email-error").innerHTML = "Please Enter your Email
ID";
document.getElementById("email-error").style.color = "Red";
emailID.focus();
return false;
}
if (checkEmail(emailID.value) == false) {
emailID.value = "";
document.getElementById("email-error").innerHTML = "Invalid Email Adderess";
document.getElementById("email-error").style.color = "Red";
emailID.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<form name="myForm" id="MyForm">
<fieldset>
<legend>
<h4>Registration Form</h4>
</legend>
<table>
<tr>
<td>First Name:</td>
<td>
<input type="text" name="fname" />
<div id="fname-error" class="error"></div>
</td>
</tr>
<tr>
<td>Last Name:</td>
<td>
<input type="text" name="lname" />
<div id="lname-error" class="error"></div>
</td>
</tr>
<tr>
<td>Age:</td>
<td>
<input type="number" name="age" minlength ="0" maxlength = "100"/>
<div id="age-error" class="error"></div>
</td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input list="genders" name="gender" />
<datalist id="genders">
<option value="Male">
<option value="Female">
<option value="Other">
</datalist>
<div id="gender-error" class="error"></div>
</td>
</tr>
<tr>
<td>Mobile:</td>
<td>
<input type="number" name="mobile" minlength="10" maxlength ="10"/>
<div id="mobile-error" class="error"></div>
</td>
</tr>
<tr>
<td>Username:</td>
<td>
<input type="userid" name="uname" />
<div id="uname-error" class="error"></div>
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" name="passid1" minlength="6" />
<div id="pass1-error" class="error"></div>
</td>
</tr>
<tr><td>Confirm Password:</td>
<td>
<input type="password" name="passid2" minlength="6"/>
<div id="pass2-error" class="error"></div>
</td>
</tr>
<tr>
<td>E-mail:</td>
<td>
<input type="email" name="email" />
<div id="email-error" class="error"></div>
</td>
</tr>
<tr>
<td colspan="2">
<button onlick="return !!(validateform() & ValidatePassid() &
Validate() & ValidateEmail())">Submit</button>
<span id="display">
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
相关的问题，但两位开发人员似乎没有就如何使用chart.js + JSON显示图表给出相同的答案。
我正在尝试使用JSON文件显示图表 - 特别是＆＃34;数量＆＃34;与他们的相关标签（＆＃34; 2017年1月＆＃34;，...）。
图表canva显示得很好，没有控制台日志错误，但没有图表本身。我错过了什么？
谢谢！
这是我的chart.js代码： -
chart.js这是我的JSON文件： -
var labels = [];
var data = [];
$.getJSON("https://jsonblob.com/api/jsonBlob/26078b70-6b6f-11e7-a38a-bf689f57642c"), function (data) {
$.each(data.customers.amounts, function(key, value){
var labels = json.map(function(item) {
labels.push(item.key);
});
var data = json.map(function(item) {
data.push(item.value);
});
});
}
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
labels: labels,
backgroundColor: 'rgb(129, 198, 2228)',
borderColor: 'rgb(0, 150, 215)',
data: data
}]
},
options: {
responsive: 'true',
}
});
答案 0 :(得分：2)
几个问题：
$.getJSON()方法是异步的，您应该在其中构建图表的回调函数。
var labels = data.customers[0].amounts.map(function(e) {
return e[0];
});
var data = data.customers[0].amounts.map(function(e) {
return e[1];
});
labels 数组，而其中包含 data 对象。以下是您的代码的修订版本：
$.getJSON("https://jsonblob.com/api/jsonBlob/26078b70-6b6f-11e7-a38a-bf689f57642c", function(data) {
var labels = data.customers[0].amounts.map(function(e) {
return e[0];
});
var data = data.customers[0].amounts.map(function(e) {
return e[1];
});
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
backgroundColor: 'rgb(129, 198, 2228)',
borderColor: 'rgb(0, 150, 215)',
data: data
}]
},
options: {
responsive: 'true',
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>