极客教程如何使用CanvasJS实现错误组合图表
在本文中，我们将学习如何使用Canvas JS插件实现各种错误图表。
错误图表用于显示与任何变量的平均值相关的数据信息中值的不确定范围。 “I” 类型的变量表示任何数据点的值测量中的可预测偏差，通常表示数值的不确定性。
错误图表可以与柱状图、条形图或折线图相结合，以创建相关的组合图表，增加报告或图表的交互或信息特性。
语法：
new CanvasJS.Chart($("#ID"), {
data: [{
type: "column",
dataPoints: [
{...},
]
},
{
type: "error",
dataPoints: [
{ ... }
]
}
]
....
});
注意： 在实现其他组合图表时，将type属性更改为“bar”或“line”。
方法：
- 从上述属性中选择一种组合图表类型进行实现。
- 在HTML设计中，使用
<div>标签来显示所选的图表。 - 在代码的script部分，使用语法来设置CanvasJS库的 type ， data ， datapoints 和其他选项属性，实例化CanvasJS对象。
- 在代码的head部分包含CDN链接，以使用插件的功能。
- 使用Canvas JS插件的render()方法呈现图表。
- 根据以下示例代码中给出的样式设置其他属性或属性以满足图表的需求。
- 根据代码实现的数据生成图表。
CDN链接：
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
示例1： 下面的代码展示了使用Canvas JS插件创建的组合图表中的列错误图表。它展示了一所学校中3个尖子学生在不同科目中的预估成绩和实际成绩。错误变量范围是从尖子学生预期得到的预估成绩。实际成绩通过图表中的列来表示。x轴显示了不同科目，所有3个尖子学生用不同颜色的列来表示。y轴显示以百分比表示的成绩。鼠标悬停在错误线上时显示了预估范围的值。
HTML
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src=
"https://canvasjs.com/assets/script/canvasjs.min.js">
</script>
</head>
<body>
<div style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Canvas JS Error Column Chart </h3>
</div>
<div id="chartID"
style="height:400px; max-width:950px;
margin:0px auto;">
</div>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartID", {
title:{
text: "Average Marks of Toppers"
},
axisX:{
title: "Subjects"
},
axisY:{
title: "Marks (in Percentage)",
suffix: " %"
},
legend:{
cursor:"pointer"
},
data: [{
type: "column",
name: "First Ranker",
color: "lightgreen",
showInLegend: true,
legendText: "First Ranker Score",
toolTipContent:
"<b> {label} </b>: {y} %",
dataPoints: [
{ label:"Physics", y:94 },
{ label:"Maths", y: 92 },
{ label:"Biology", y: 98},
{ label: "Chemistry", y: 95},
{ label: "English",y:90 }
]// End dataPoints for first ranker
},
{
type: "error",
name: "Expected Marks range",
toolTipContent:
"<b>{name}:</b> {y[0]} - {y[1]} %",
dataPoints: [
{ label:"Physics", y:[91,95] },
{ label:"Maths", y: [90,93]},
{ label:"Biology", y: [97,99]},
{ label: "Chemistry", y: [92,96]},
{ label: "English",y:[88,92] }
]// End dataPoints for 3rd ranker
},// End data
{
type: "column",
showInLegend: true,
legendText: "Second Ranker Score",
name: "Second Ranker",
color: "pink",
toolTipContent:
"<b> {label} </b>: {y} %",
dataPoints: [
{ label:"Physics", y:92 },
{ label:"Maths", y: 90 },
{ label:"Biology", y: 96},
{ label: "Chemistry", y: 94},
{ label: "English",y:89 }
]// End dataPoints for 2nd ranker
},
{
type: "error",
name: "Expected marks range",
toolTipContent:
"<b>{name}:</b> {y[0]} - {y[1]} % ",
dataPoints: [
{ label:"Physics", y:[91,93] },
{ label:"Maths", y: [88,92]},
{ label:"Biology", y: [94,97]},
{ label: "Chemistry", y: [92,95]},
{ label: "English",y:[85,91] }
]// End dataPoints for 3rd ranker
},// End data
{
type: "column",
showInLegend: true,
legendText: "Third Ranker Score",
name: "Third Ranker",
color: "brown",
toolTipContent:
"<b> {label} </b>: {y} % ",
dataPoints: [
{ label:"Physics", y:93},
{ label:"Maths", y: 85 },
{ label:"Biology", y: 85},
{ label: "Chemistry", y: 89},
{ label: "English",y:86 }
]// End dataPoints for 3rd ranker
},
{
type: "error",
name: "Expected Marks range",
toolTipContent:
"<b>{name}:</b> {y[0]} - {y[1]} %",
dataPoints: [
{ label:"Physics", y:[91,95] },
{ label:"Maths", y: [84,92]},
{ label:"Biology", y: [84,99]},
{ label: "Chemistry", y: [87,95]},
{ label: "English",y:[85,89] }
]// End dataPoints for 3rd ranker
}// End error data
]// End data
});
chart.render();
}// window onload
</script>
</body>
</html>
输出：
示例2： 下面的代码示例演示了使用插件的线错误组合图，显示了在12个月期间的实际销售额以及带有误差线的预计销售额。y轴显示销售额（单位：美元）。
HTML
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src=
"https://canvasjs.com/assets/script/canvasjs.min.js">
</script>
</head>
<body>
<div style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Error Line Chart </h3>
</div>
<div id="chartID"
style="height:400px; max-width:950px;
margin:0px auto;">
</div>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartID", {
title:{
text: "Predicted Sales in a year"
},
axisX:{
interval:1
},
axisY:{
title: "Sales Amount (in )",
prefix: ""
},
data: [{
type: "line",
name: "Actual Sales",
toolTipContent:
"<b> {label}</b> <br><span> {name} </span>: {y} ",
dataPoints: [
{ label:"Jan",y:25000 },
{ label:"Feb",y:18000 },
{ label:"March",y:24000},
{ label: "April",y:28000},
{ label: "May", y:22000 },
{ label: "June",y:14000 },
{ label: "July", y:8000 },
{ label: "August",y:11000 },
{ label: "Sep", y:32000 },
{ label: "Oct", y:18500 },
{ label: "Nov", y:19000 },
{ label: "Dec", y:21000 }
]// end dataPoints
},
{
type:"error",
name:"Estimated Sales",
toolTipContent: "<span>{name}</span>:{y[0]} - ${y[1]}",
dataPoints: [
{ label:"Jan",y:[23650,26555] },
{ label:"Feb",y:[16000,19500] },
{ label:"March",y:[21750,25900]},
{ label: "April",y:[26000,29000]},
{ label: "May", y:[21000,23300]},
{ label: "June",y:[12000,16000]},
{ label: "July", y:[6500,9900]},
{ label: "August",y:[10000,13900]},
{ label: "Sep", y:[31000,33000]},
{ label: "Oct", y:[17000,19670]},
{ label: "Nov", y:[17980, 22000]},
{ label: "Dec", y:[20000,23000]}
]// end dataPoints
}// data type error
]// end data
});
chart.render();
}// window onload
</script>
</body>
</html>
输出:
示例3： 以下代码演示了使用Canvas JS插件显示基于不同课程主题或技术的文章发布数量（x轴）的柱形错误组合图。误差栏显示了准备发布的管道中估计的文章数量。
HTML
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src=
"https://canvasjs.com/assets/script/canvasjs.min.js">
</script>
</head>
<body>
<div style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Canvas JS Error Bar Chart </h3>
</div>
<div id="chartID"
style="height:400px; max-width:950px;
margin:0px auto;">
</div>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartID", {
title:{
text: "GeeksforGeeks Articles Chart"
},
axisX:{
title: "Courses",
},
axisY:{
title: "Articles",
includeZero: true
},
toolTip: {
// Tooltips are shared while mouse hover
shared: true
},
data: [{
type: "bar",
name: "Average articles published",
color: "lightgreen",
toolTipContent:
"<b>{label}</b> <br> <span>{name}</span>: {y}",
dataPoints: [
{ label:"Data structures", y:94 },
{ label:"Algorithms", y:75 },
{ label:"Web Technologies", y:89},
{ label: "Python", y:80},
{ label: "Blockchain", y:76},
{ label: "JavaScript", y:88 },
{ label: "PHP", y:98 },
{ label: "MySQL", y: 84 },
{ label: "HTML", y:92 }
]// end dataPoints
},
{
type: "error",
name: "Estimated articles range (In Pipeline)",
stemColor: "red",
whiskerThickness: 4,
toolTipContent:
"<b>{label}</b> <br> <span>{name}</span>: {y[0]} - {y[1]}",
dataPoints: [
{ label:"Data structures", y:[91,95] },
{ label:"Algorithms", y:[72,80] },
{ label:"Web Technologies", y:[85,91] },
{ label: "Python", y:[75,92] },
{ label: "Blockchain", y:[74,80] },
{ label: "JavaScript", y:[80,91] },
{ label: "PHP", y:[90,105] },
{ label: "MySQL", y: [79,89] },
{ label: "HTML", y:[89,95] }
]// end dataPoints
}
]// end data
});
chart.render();
}// window onload
</script>
</body>
</html>
输出：
结论： 综合错误曲线主要用于报告目的，如天气分析、人力资源管理或任何类型的监测项目。它显示了数据准确性的概念，指示了测量中的估计误差或预测。它表示数据与预期值之间的差异量。当出现这种情况时，我们需要使用任何图表与错误图表类型的组合，显示估计值范围与实际值。