# 圖表
更多個性化定制請參考組件依賴的 [http://www.chartjs.org](http://www.chartjs.org/docs/latest/getting-started/usage.html)

## 使用
```
<div style="width: 500px;height: 100px;">
<canvas id="myChart"></canvas>
</div>
<script>
require(['hdjs'], function (hdjs) {
let options = {
type: 'bar',
data: {
labels: ["hdjs", "hdphp", "hdcms", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 2
}]
},
options: {
title: {
display: true,
text: '后盾人 人人做后盾'
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
};
hdjs.chart('#myChart',options);
})
</script>
```
- 文檔已經遷移到后盾人
- 基礎知識
- 項目介紹
- 安裝配置
- 日期時間
- 日期選擇
- 列表框日期
- 日期區間
- 時間選擇
- moment
- 上傳處理
- 初始配置
- 圖片上傳
- 文件上傳
- 消息通知
- 消息通知
- Bootstrap消息
- izitoast
- SweetAlert
- 模態框
- 表單管理
- 異步請求
- 表單提交
- 表單驗證
- 擴展組件
- GET參數
- 剪貼板
- 表情選擇
- 圖表
- 拾色器
- 二維碼生成
- 光標控制
- 數據驗證
- md5
- 設備檢測
- Loading
- 預覽圖片
- 圖標庫
- COOKIE
- 百度地圖
- 城市選擇
- Vue.js
- jQuery
- axios
- 播放器
- 幻燈片
- 代碼高亮
- 阿里云OSS
- 驗證碼
- 頁面滾動
- lodash
- momentjs
- markdownIt
- 元素頁面固定
- 編輯器
- ueditor
- editor.md
- SimpleMDE
- simditor
- 自定義組件
- 1.0(舊版)
- 基礎知識
- 作者向軍
- 安裝配置
- 查看效果
- 元素樣式
- 日期時間
- 日期選擇
- 日期區間
- 時間選擇
- moment
- 上傳處理
- 圖片上傳
- 文件上傳
- 后臺處理
- 模態消息
- 模態
- notify
- bootstrap
- 表單管理
- 表單提交
- 表單驗證
- 表單樣式
- 擴展組件
- 自定義組件
- get參數
- 剪貼板
- 表情選擇
- 圖表
- 拾色器
- 二維碼生成
- 光標控制
- 數據驗證
- MD5
- loading
- 預覽圖片
- 圖標庫
- COOKIE
- 百度地圖
- 城市選擇
- Vuejs
- jQuery
- 播放器
- 幻燈片
- axios
- 代碼高亮
- 阿里云OSS
- 驗證碼
- 正則表達式
- 工具函數
- 編輯器
- 百度編輯器
- markdown
- simplemde-markdow