使用Charts.js在HTML5中创建图表
我想用chart.js绘制一个折线图，我遵循了chart.js的“入门”部分，但我仍然无法绘制示例图。我的代码有什么问题？根据NetBeans的说法，一切都没问题 代码如下：使用Charts.js在HTML5中创建图表,charts,html5-canvas,Charts,Html5 Canvas,我想用chart.js绘制一个折线图，我遵循了chart.js的“入门”部分，但我仍然无法绘制示例图。我的代码有什么问题？根据NetBeans的说法，一切都没问题 代码如下： <!doctype html> <html lang="nl"> <head> <meta charset="utf-8"> <title>Become a member</title&
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Become a member</title>
<script type="text/javascript" src="Chart.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
window.onLoad = function() {
init();
};
function init() {
var ctx = $("#myChart").get(0).getContext("2d");
var myNewChart = new Chart(ctx).Line(data, options);
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
}
}
</script>
<div>
<section>
<article>
<canvas id="myChart" width="400" height="400">
</canvas>
</article>
</section>
</div>
</body>
</html>
入会
window.onLoad=函数（）{
init（）；
};
函数init（）{
var ctx=$（“#myChart”）.get（0.getContext（“2d”）；
var myNewChart=新图表（ctx）.Line（数据、选项）；
风险值数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
填充颜色：“rgba（220220,0.5）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
数据：[65,59,90,81,56,55,40]
},
{
填充颜色：“rgba（151187205,0.5）”，
strokeColor:“rgba（151187205,1）”，
点颜色：“rgba（151187205,1）”，
pointStrokeColor:“fff”，
数据：[28,48,40,19,96,27,100]
}
]
}
}
问候
Glenn您需要放置此行：
var myNewChart=新图表（ctx）.Line（数据、选项）
在你的声明下面。此外，您没有定义您的选项，因此您还需要将其从通话中删除
完成后，它应该如下所示：
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Become a member</title>
<script type="text/javascript" src="Chart.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
window.onload = function() {
init();
};
function init() {
var ctx = $("#myChart").get(0).getContext("2d");
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [65, 59, 90, 81, 56, 55, 40]
},
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 100]
}
]
}
var myNewChart = new Chart(ctx).Line(data);
}
</script>
<div>
<section>
<article>
<canvas id="myChart" width="400" height="400">
</canvas>
</article>
</section>
</div>
</body>
</html>
入会
window.onload=函数（）{
init（）；
};
函数init（）{
var ctx=$（“#myChart”）.get（0.getContext（“2d”）；
风险值数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[
{
填充颜色：“rgba（220220,0.5）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
数据：[65,59,90,81,56,55,40]
},
{
填充颜色：“rgba（151187205,0.5）”，
strokeColor:“rgba（151187205,1）”，
点颜色：“rgba（151187205,1）”，
pointStrokeColor:“fff”，
数据：[28,48,40,19,96,27,100]
}
]
}
var myNewChart=新图表（ctx）.Line（数据）；
}
自从你问这个问题以来，我已经有一段时间了。我希望你已经找到了答案。如果没有，我将附加一个示例代码，使用chart.js生成一个简单的“折线图”。如果运行此代码段，将得到一个折线图
如果其他任何人在这方面做得不好，也可能会对他们有所帮助。我的参考点是chart.js官方页面
这是我给出Chart.js路径的行：
我希望这有帮助
谢谢，
凯
var ctx=document.getElementById（“c”）.getContext（“2d”）；
风险值数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]，
数据集：[{
标签：“我的第一个数据集”，
填充颜色：“rgba（220220,0.2）”，
strokeColor:“rgba（2201）”，
点颜色：“rgba（220220,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（2201）”，
数据：[65,59,80,81,56,55,40]
}, {
标签：“我的第二个数据集”，
填充颜色：“rgba（151187205,0.2）”，
strokeColor:“rgba（151187205,1）”，
点颜色：“rgba（151187205,1）”，
pointStrokeColor:“fff”，
pointHighlightFill:“fff”，
pointHighlightStroke:“rgba（151187205,1）”，
数据：[28,48,40,19,86,27,90]
}]
};
var MyNewChart=新图表（ctx）.Line（数据）；
根据新版chartjs
，版本2.8.0
这是一个工作代码示例
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},
// Configuration options go here
options: {}
});
</script>
</body>
</html>
您似乎没有任何jQuery的参考资料，尽管它在您的页面中使用：Filipos，谢谢您的评论，我复制代码时似乎遗漏了它。我对jQuery的链接是：不知何故，这个窗口。当我尝试它时，onLoad
永远不会被执行。但将init（）
放入body标签中会起作用：
您是否知道相关点击点并生成模式弹出窗口？您是否知道相关点击点并生成模式弹出窗口？