特效介绍
chartjs是一个图表控件集合，可以创建柱状图、折线图、曲线图等等，使用html5的canvas进行绘制：
使用方法
InstallationYou can download the latest version of Chart.js from the GitHub releases or use a Chart.js CDN.
To install via npm:
npm install chart.js --saveTo install via bower:
bower install chart.js --saveSelecting the Correct Build
Chart.js provides two different builds for you to choose: Stand-Alone Build, Bundled Build.
Stand-Alone Build
Files:
dist/Chart.js
dist/Chart.min.js
The stand-alone build includes Chart.js as well as the color parsing library. If this version is used, you are required to include Moment.js before Chart.js for the functionality of the time axis.
Bundled Build
Files:
dist/Chart.bundle.js
dist/Chart.bundle.min.js
The bundled build includes Moment.js in a single file. You should use this version if you require time axes and want to include a single file. You should not use this build if your application already included Moment.js. Otherwise, Moment.js will be included twice which results in increasing page load time and possible version compatibility issues. The Moment.js version in the bundled build is private to Chart.js so if you want to use Moment.js yourself, it's better to use Chart.js (non bundled) and import Moment.js manually.
Documentation
You can find documentation at www.chartjs.org/docs. The markdown files that build the site are available under /docs. Previous version documentation is available at www.chartjs.org/docs/latest/developers/#previous-versions.
Contributing
Before submitting an issue or a pull request, please take a moment to look over the contributing guidelines first. For support using Chart.js, please post questions with the chartjs tag on Stack Overflow.
Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试Pie饼状图型</title>
<script src="//cdn.bootcss.com/Chart.js/2.1.6/Chart.bundle.js"></script>
<style>
</style>
</head>
<body>
<!-- 展示canvas -->
<div style="width: 500px;">
<canvas id="myChart" style="width:400px; height:800px;" ></canvas>
</div>
<!--引入 chartjs-->
<script type="text/javascript">
// 设置参数
var data = {
labels: [
"Red",
"Blue",
"Yellow"
],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
// Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx, {
type: 'pie',
data: data,
// options: options
});
</script>
</body>
</html>
部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！
