极客教程如何通过CanvasJS实现使用外部文件的图表
在本文中，我们将学习如何使用CanvasJS插件从JSON和CSV外部文件实现条形图和柱状图。
条形图是数据按组的图形表示，可以水平或垂直显示，条的长度表示轴上的数据值。它们通常用于显示或传达“分类数据”所属的信息，即适用于某些类别的数据。
柱状图用于比较不同时间的数据或展示变化。在柱状图中，水平条表示类别，垂直条表示数值。
实施方法：
- 在HTML设计中，使用
<canvas>标签显示混合图表图形。- 在代码的
script部分，通过设置库的类型、数据和选项属性来实例化ChartJS对象。 - 根据需要为图表中的数据集样式设置其他属性或属性。编写
jQuery get()方法从外部文件中读取数据，并使用数据点创建图表。
- 在代码的
CDN 链接:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.min.js">
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
示例1：以下代码从一个样本JSON文件中读取数据，并将这些数据用作Canvas JS图表的数据点。jQuery中的getJSON()方法使用GET HTTP请求从服务器获取JSON编码数据。addData()方法将所有数据推送到空数组中，以用作图形显示的数据点。
HTML
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript"
src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js">
</script>
<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 bar chart by JSON data </h3>
</div>
<div id="chartID" style="height:400px; max-width:950px;
margin:0px auto;">
</div>
<script>
window.onload = function () {
let mydataPoints = [];
let chart = new CanvasJS.Chart("chartID", {
title: {
text: "Bar charts from JSON data"
},
axisY: {
title: "Y Units",
includeZero: true
},
axisX: {
title: " X Units",
interval: 10
},
data: [
{
type: "bar",
color: "green",
dataPoints: mydataPoints
}
]// end data
});
function addData(data) {
for (let i = 0; i < data.length; i++) {
mydataPoints.push({
x: data[i].x,
y: data[i].y
});
}
chart.render();
}
$.getJSON("sample1.json", addData);
}// window onload
</script>
</body>
</html>
sample1.json：该文件在上述HTML文件中使用。
[
{
"x": 27,
"y": 33
},
{
"x": 34,
"y": 37
},
{
"x": 47,
"y": 56
},
{
"x": 51,
"y": 26
},
{
"x": 60,
"y": 31
},
{
"x": 65,
"y": 54
},
{
"x": 75,
"y": 43
}
]
输出:
示例2：以下代码使用CSV文件作为外部文件，显示一个包含10年移动销售的柱状图。在jQuery.get()方法中，通过使用GET HTTP请求来加载服务器上的数据。
HTML
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript"
src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript"
src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.21/jquery.csv.min.js">
</script>
<script 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 column chart using CSV data </h3>
</div>
<div id="chartID"
style="height:400px;
max-width:950px;
margin:0px auto;">
</div>
<script>
window.onload = function () {
let mydataPoints = [];
function getDataPointsFromCSV(csvFile) {
let mydataPoints = csvData = points = [];
csvData = csvFile.split(/[\r?\n|\r|\n]+/);
for (let i = 0; i < csvData.length; i++) {
if (csvData[i].length > 0) {
points = csvData[i].split(",");
mydataPoints.push({
label: parseFloat(points[0]),
y: parseFloat(points[1]),
mobile: String(points[2])
});
}
}//end for loop
return mydataPoints;
}// end function
$.get("sampleCSVCopy.csv", function (data) {
let chart = new CanvasJS.Chart("chartID", {
title: {
text: "Mobile sales in 10 years ",
},
axisY: {
title: "Number of mobiles"
},
axisX: {
title: "Year"
},
toolTip: {
shared: true,
enabled: true,
content: "<b>{mobile}</b> Sale in Year {label} is: {y}"
},
data: [{
type: "column",
name: "Mobile phones sale",
color: "green",
axisYType: "primary",
dataPoints: getDataPointsFromCSV(data)
}]// end data
});// end chart
chart.render();
});// end get function
}// window onload
</script>
</body>
</html>
sampleCSVCopy.csv：该文件在上述文件中使用。
输出:
