这是一个非常好用，简单明了的图表制作框架，这里就讲一下基础的Chart.js使用。需要注意的是Bootstrap上的Chart.js网站的文档是1.x版本的，现在的是2.x版本的，用法上会有极大的不同，所以千万不要看Bootstrap上的中文文档，直接去官网http://www.chartjs.org/看就行。
用法上其实很简单，HTML用<canvas>标签，然后在JS中初始化这个标签的元素，然后再用JS配置参数即可，主要是JS配置参数，别的都是死的。需要注意的是决定这个图表的尺寸，是用包裹<canvas>的外层div的width属性来决定的，只需要修改width属性，高度自适应。直接修改<canvas>的宽高并没有什么卵用。
然后HTML和JS初始化都统一放在这里，后面的文章就只讲配置的参数了，配置的参数在初始化后面接下去写就可以了。
<body>
<div>
<!-- chart.js的HTML元素 -->
<canvas id="demoChart"></canvas>
</div>
<script>
// 初始化这个chart HTML元素
var chartInit = $('#demoChart').get(0).getContext("2d");
</script>
</body>
一、折线图（line）
1. 参数代码样例
new Chart(chartInit, {
type: 'line'
,data: {
labels: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'June.', 'July.', 'Aug.', 'Sept.', 'Oct.', 'Nov.', 'Dec']
,datasets: [{
label: '工资'
,borderWidth: 2
,borderColor: 'rgba(30, 144, 255, 1)'
,backgroundColor: 'rgba(30, 144, 255, 0.7)'
,data: [3500, 3000, 4000, 3700, 3200, 3500, 3400, 3600, 3200, 3500, 3800, 6800]
}]
},
// 加了这个x轴, y轴最低数据就从0开始算, 不加就从最低的那个数据开始算
options: {
scales: {
yAxes: [{
ticks: {
min: 0
}
}]
}
}
});
1.1 参数代码实现
（图片模糊可以右键-在新标签页中打开图片）
2. 参数说明
2.1 data-datasets属性
| Name | Type | Description |
|---|---|---|
| label | String/String[] | 每个数据对应的那个标题，比方说1-12月的折线图，1月的数据是200，label就是1月，label是数组，也可以是字符串，看你的需求了。 |
| xAxisID | String | 没用过，不知道 |
| yAxisID | String | 没用过，不知道 |
| backgroundColor | Color | 折线图和x轴和y轴圈起来的区域的背景颜色 |
| borderColor | Color | 折线的颜色。 |
| borderWidth | Number | 折线的粗细，不写就是0 |
| borderDash | Number[] | 折线的虚线之间的距离[0]就是不写，写了就是虚线了，数组里只设一个值，就是虚线和距离一样长 |
| borderDashOffset | Number | 折线的虚线之间的偏移量，非常细小的差距，改了都看不出来，比方说你这根虚线不想让他的虚线到这个数据点上，那你就用这个往左移或者往右移（正负值） |
| borderCapStyle | String | 折线的虚线边框风格： 'butt':默认(方角), 'round': 比默认两端长出一点(圆角), 'square': 比默认两端长出一点(方角), 具体可以参考官方文档 |
| borderJoinStyle | String | 折线折的那个角的风格：有三个值，参考官方文档 |
| cubicInterpolationMode | String | 可以填两个值：'dafault'或'monotone'，具体有什么用不知道 |
| fill | Boolean/String | 没用过，不知道 |
| lineTension | Number | 线的贝塞尔曲线张力，我理解是折线的弯曲度。可以是小数，我建议你在0-1之间取值，0是没有曲线的折线，0.5应该是默认的，要是设20可能会有奇怪的惊喜。 |
| pointBackgroundColor | Color/Color[] | 折线图上的数据点的填充颜色 |
| pointBorderColor | Color/Color[] | 折线图上的数据点的边框颜色 |
| pointBorderWidth | Number/Number[] | 折线图上的数据点的边框宽度 |
| pointRadius | Number/Number[] | 折线图上的数据点的大小 |
| pointStyle | String/String[]/Image/Image[] | 折线图上的数据点的风格 'circle': 圆圈 'cross': 一条小横杠 'crossRot': 一个叉（×） 'dash': 还是一条横杠，点的右边多一点 'line': 还是一条横杠，点在中间，两边一样多 'rect': 正方形 'rectRounded': 圆角矩形 'rectRot': 菱形的正方形 'star': 看起来像"*"，反正不会是好看的五角星 'triangle': 正三角形 使用自定义图片请参考官方文档 |
| pointHitRadius | Number/Number[] | 对鼠标做出反应的显示数据点的大小，比方说你设置了pointRadius的大小很大，但是这个属性没有设置，就是说你鼠标移上去，要移到中间才会有数据看到，那用户体验肯定很不OK了。 |
| pointHoverBackgroundColor | Color/Color[] | 鼠标移到折线图的数据点上时点的背景颜色 |
| pointHoverBorderColor | Color/Color[] | 鼠标移到折线图的数据点上时点的边框颜色 |
| pointHoverBorderWidth | Number/Number[] | 鼠标移到折线图的数据点上时点的边框宽度 |
| pointHoverRadius | Number/Number[] | 鼠标移到折线图的数据点上时点的大小 |
| showLine | Boolean | 是否显示折线，当为false的时候，线不显示，但是点还在的 |
| spanGaps | Boolean | false: 默认，如果一个标签的数据是null或者没有值，就会出现断层，从下一个有值的数据点开始继续显示折线图 true: 如果一个标签的数据是null或者没有值，折线会做弥补处理，继续划线到下一个有值的数据点上，但是这个标签的数据点是没有的 |
| steppedLine | Boolean/String | false: 默认 true: 折线图变成阶梯折线 'before': 数据点在阶梯矩形的左边 'after': 数据点在阶梯矩形的右边 |
二、柱状图（bar）
1. 参数代码样例
new Chart(chartInit, {
type: 'bar'
,data: {
labels: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'June.']
,datasets: [{
label: '工资'
,borderWidth: 2
,borderColor: 'rgba(30, 144, 255, 1)'
,backgroundColor: 'rgba(30, 144, 255, 0.7)'
,data: [3500, 3000, 4000, 3700, 3200, 3500]
}]
},
options: {
scales: {
yAxes: [{
ticks: {
min: 0
}
}]
}
}
});
1.1 参数代码实现
（图片模糊可以右键-在新标签页中打开图片）
2. 参数说明
2.1 data-datasets属性
| Name | Type | Description |
|---|---|---|
| label | String | 你传的数据的标题 |
| xAxisID | String | 没用过，不知道 |
| yAxisID | String | 没用过，不知道 |
| backgroundColor | Color/Color[] | 柱子的背景颜色 |
| borderColor | Color/Color[] | 柱子的边框颜色，需要注意的是要和下面的属性配合使用，不然就会无效 |
| borderWidth | Number/Number[] | 柱子边框粗细 |
| borderSkipped | String | 用了不知道啥效果，总共4个值 'bottom': , 'left': , 'top': , 'right': , |
| hoverBackgroundColor | Color/Color[] | 鼠标移上去时显示的背景色 |
| hoverBorderColor | Color/Color[] | 鼠标移上去时显示的边框色 |
| hoverBorderWidth | Number/Number[] | 鼠标移上去时显示的边框粗细 |
2.2 type属性
'bar': 默认竖的柱状图,
'horizontalBar': 横过来的柱状图
三、雷达图（radar）
或者叫蛛网图
1. 参数代码样例
new Chart(chartInit, {
type: 'radar'
,data: {
labels: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'June.', 'July.', 'Aug.', 'Sept.', 'Oct.', 'Nov.', 'Dec']
,datasets: [{
label: '胖虎工资'
,borderWidth: 2
,borderColor: 'rgba(30, 144, 255, 1)'
,backgroundColor: 'rgba(30, 144, 255, 0.7)'
,data: [3500, 3000, 4000, 3700, 3200, 3500, 3400, 3600, 3200, 3500, 3800, 6800]
},{
label: '静香工资'
,borderWidth: 2
,borderColor: 'rgba(0, 0, 0, 1)'
,backgroundColor: 'rgba(0, 0, 0, 0.7)'
,data: [3000, 3200, 4100, 3200, 3000, 3200, 3100, 3300, 3000, 3100, 3600, 5800]
}]
},
options: {
// 需要特别注意的是: 这里的scale没有s
scale: {
ticks: {
min: 0
}
}
}
});
1.1 参数代码实现
2. 参数说明
2.1 data-datasets属性
| Name | Type | Description |
|---|---|---|
| label | String | 数据或数据集的标题 |
| backgroundColor | Color | 雷达线包围区域的背景色 |
| borderColor | Color | 雷达线颜色 |
| borderWidth | Number | 雷达线粗细 |
| borderDash | Number[] | 雷达线虚线长度和虚线距离，数组里只设一个值，就是虚线和距离一样长 |
| borderDashOffset | Number | 雷达线虚线的偏移量，左移或右移，很细微的差距 |
| borderCapStyle | String | 雷达线的虚线边框风格： 'butt':默认(方角), 'round': 比默认两端长出一点(圆角), 'square': 比默认两端长出一点(方角), 具体可以参考官方文档 |
| borderJoinStyle | String | 雷达线折的那个角的风格：有三个值，参考官方文档 |
| fill | Boolean/String | 没用过，不知道 |
| lineTension | Number | 线的贝塞尔曲线张力，我理解是雷达线的弯曲度。可以是小数，我建议你在0-1之间取值，0是没有曲线的折线，0.5应该是默认的，要是设20可能会有奇怪的惊喜。 |
| pointBackgroundColor | Color/Color[] | 数据点背景色 |
| pointBorderColor | Color/Color[] | 数据点边框色 |
| pointBorderWidth | Number/Number[] | 数据点边框粗细 |
| pointRadius | Number/Number[] | 数据点大小 |
| pointStyle | String/String[]/Image/Image[] | 雷达图上的数据点的风格 'circle': 圆圈 'cross': 一条小横杠 'crossRot': 一个叉（×） 'dash': 还是一条横杠，点的右边多一点 'line': 还是一条横杠，点在中间，两边一样多 'rect': 正方形 'rectRounded': 圆角矩形 'rectRot': 菱形的正方形 'star': 看起来像"*"，反正不会是好看的五角星 'triangle': 正三角形 使用自定义图片请参考官方文档 |
| pointHitRadius | Number/Number[] | 对鼠标做出反应的数据点大小 |
| pointHoverBackgroundColor | Color/Color[] | 鼠标移上去时数据点背景色 |
| pointHoverBorderColor | Color/Color[] | 鼠标移上去时数据点边框色 |
| pointHoverBorderWidth | Number/Number[] | 鼠标移上去时数据点边框粗细 |
| pointHoverRadius | Number/Number[] | 鼠标移上去时数据点大小 |
四、饼图（pie）和甜甜圈图（doughnut）
或者叫环形饼图、面包图，但是我还是喜欢叫甜甜圈图：）
1. 参数代码样例
new Chart(chartInit, {
type: 'doughnut'// or 'pie'
,data: {
labels: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May.', 'June.']
,datasets: [{
label: '工资'
,borderWidth: 0
,backgroundColor: ['red', 'orange', 'yellow', 'green', 'cyan', 'blue']
,data: [3500, 3000, 4000, 3700, 3200, 3500]
,lineTension: 1
}]
},
});
1.1 参数代码实现
参数说明：
// 时间关系，今天就写到这，后面补上
// 其实有些不是没用过，是用了不知道哪里变了，希望有知道的小伙伴可以告诉我，谢谢大家！
// 我现在发现还有个更好的框架叫EChart.js，是百度出的，中文文档，功能齐全，所以我打算去看看那个，这个先不写了，不过这个也是有优点的，因为他比较小，流畅，如果用户对图表没有太大的要求，那就可以用这个了。
扫一扫
1452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
