Chartjs（1.0.2版本）入门使用
生活随笔
收集整理的這篇文章主要介紹了
Chartjs（1.0.2版本）入门使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Chart.js（1.0.2版本）入門使用（最基礎）
直接將一下內容粘貼到任意編輯器里，瀏覽器打開就可以顯示
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Chart.js入門使用</title>
5 <meta charset="utf-8">
6 <!--<script src="Chart.js"></script>-->
7 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
8 </head>
9 <body>
10 <!--
11 1 -- html頁面中 創建一個canvas元素，給定id，也可以同時直接給定寬和高
12 2 -- js中：2.1 用dom或者jq方法獲得以上canvas
13 2.2 獲取2d元素ctx
14 3 -- js中：3.1 初始化數據data=[{},{},{}...]
15 注：每個{}代表一份或者一個點
16 {value://數值
17 color:默認加載時的顏色
18 highlight:// hover時的顏色
19 label:鼠標移入該區域顯示的內容標簽
20 }
21 4 -- js中：基于畫布對象ctx,創建Chart對象
22 5 -- js中：基于初始化的數據data，通過Chart對象調用圖表方法
23 /*
24 * 餅狀圖 - Pie(datas,options)
25 * datas - 圖表的數據
26 * options - 選項
27 * 柱狀圖 - Bar(datas,options)
28 * 曲線圖 - Line(datas,options)
29 */
30 -->
31 <!--1 -- html頁面中 創建一個canvas元素，給定id，也可以同時直接給定寬和高-->
32 <canvas id="canvas" width="400" height="400"></canvas>
33 <script>
34 // 2 -- js中：2.1 用dom或者jq方法獲得以上canvas
35 var canvas = document.getElementById("canvas");
36 // 2.2 獲取2d元素ctx
37 var ctx = canvas.getContext('2d');
38 //3 -- js中：3.1 初始化數據data=[{},{},{}...]
39 var data = [
40 {
41 value: 30,
42 color:"lightgreen",
43 highlight: "green",
44 label: "大白菜"
45 },
46 {
47 value: 50,
48 color: "#46BFBD",
49 highlight: "#5AD3D1",
50 label: "小白菜"
51 },
52 {
53 value: 60,
54 color: "#FDB45C",
55 highlight: "#FFC870",
56 label: "洋白菜"
57 },
58 {
59 value: 40,
60 color: "#afB45C",
61 highlight: "#FabC870",
62 label: "娃娃菜"
63 },
64 {
65 value: 40,
66 color: "#949FB1",
67 highlight: "#f00",//A8B3C5
68 label: "圓白菜"
69 }
70
71 ];
72 //4 -- js中：基于畫布對象ctx,創建Chart對象
73 var chart = new Chart(ctx);
74 //5 -- js中：基于初始化的數據data，通過Chart對象調用圖表方法
75 chart.Pie(data);
76 </script>
77 </body>
78 </html>
haley歡迎您來訪本博客。此博客是作者在工作中的一個記事本，方便下次遇到同樣問題時，以最快的速度解決掉遇到的問題。如果您發現哪里寫的不對，歡迎給我留言，讓我們一起進步。不勝感激！
總結
以上是生活随笔為你收集整理的Chartjs（1.0.2版本）入门使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 海尔中央空调价格
- 下一篇： 怎么创建具有真实纹理的CG场景岩石？