Chartist.js(开源的响应式图表库)

2014-12-22阅读(10685)评论(0)牵着狗狗看MM

W3Cways.com 微信公众号

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

Demo

转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » Chartist.js(开源的响应式图表库)
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!