我爱模板网 > 特效插件 > 统计图表 >  Chart.js图表插件详解正文

Chart.js图表插件详解

特效介绍
chartjs是一个图表控件集合,可以创建柱状图、折线图、曲线图等等,使用html5的canvas进行绘制:



使用方法
Installation

    You 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 --save
    To install via bower:
bower install chart.js --save
Selecting 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>



部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:jQuery easypiechart饼状图插件使用方法 下一篇:没有了
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢