Web前端(W3Cways.com) - Web前端学习之路
官网地址：http://gionkunz.github.io/chartist-js/
下载地址：https://github.com/gionkunz/chartist-js/tree/develop/dist
特点
- 使用基于配置的转换简单处理
- 使用明确的分离，具有巨大的灵活性(使用 CSS 样式和 JS 控制)
- 使用 SVG
- 完全响应式，具有独立 DPI
- 多媒体查询的响应式配置
- 完全使用 SASS 构建，并且支持自定义
浏览器兼容性
| IE9 | IE10 | IE11 | Firefox 31 | Chrome 35 | Safari 7 | Safari 8 | Android 4.3 | Android 4.4 | iOS Safari 6 | iOS Safari 7 | |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 总体浏览器支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
| 多行标签 | 不支持 | 不支持 | 不支持 | 支持 | 支持 | 不支持 | 支持 | 不支持 | 支持 | 不支持 | 支持 |
| 高级CSS动画 | 不支持 | 不支持 | 不支持 | 支持 | 支持 | 不支持 | 支持 | 不支持 | 支持 | 支持 | 支持 |
| SMIL的SVG动画 | 不支持 | 不支持 | 不支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
| 响应式设置 | polyfill下支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |
使用方法
一个简单的例子：
引入文件
<script type="text/javascript" src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script> <link href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
HTML
<div class="ct-chart ct-golden-section"></div>
JS
new Chartist.Line('.ct-chart', {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
series: [
[0,1,2.5,4,5],
[2,5,3,2,3],
[0,1,3.5,6,5]
]
}, {
width: 420,
height: 240
});
