官网地址: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 });