借助frappe-charts画出一个条形图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>homework3-1BarChart</title>
<meta charset="utf-8" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/frappe-charts.min.iife.js"></script>
<!-- 主要引用frapp-charts的js-->
</head>
<body>
<!--HTML-->
<div id="chart"></div>
<script>
// Javascript
let data = {
labels: ["1999", "2000", "2001", "2002",
"2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010",
"2011", "2012", "2013", "2014", "2015", "2016", "2017"],
datasets: [
{
title: "China GDP", color: "blue",
values: [1093997.267, 1211346.87, 1339395.719, 1470550.015, 1660287.966, 1955347.005, 2285965.892, 2752131.773, 3552182.312, 4598206.091,
5109953.609, 6100620.489, 7572553.837, 8560547.315, 9607224.482, 10482372.11, 11064666.28, 11190992.55, 12237700.48]
}
]
};
let chart = new Chart({
parent: "#chart", // or a DOM element
title: "中国GDP历年成长情形（单位：百万美元）",
data: data,
type: 'bar', // or 'line', 'scatter', 'pie', 'percentage'
height: 250,
barOptions:{
spaceRatio: 1.5
},
format_tooltip_x: d => (d + '').toUpperCase(),
format_tooltip_y: d => d + ' pts'
});
</script>
</body>
</html>
