强大的JavaScript响应式图表Chartist.js的使用
程序员文章站
2022-04-28 23:49:19
chartist.js是一个非常简单而且实用的javascript前端图表生成器,它支持svg格式,图表数据转换十分灵活,同时也支持多种图表展现形式,不失为一款前端开发者的...
chartist.js是一个非常简单而且实用的javascript前端图表生成器,它支持svg格式,图表数据转换十分灵活,同时也支持多种图表展现形式,不失为一款前端开发者的开发利器。
chartist.js的特点
- 配置十分简单,可以很方便地转换各种图表数据格式。
- css和javascript分离,因此代码比较简洁,使用就相对方便。
- 使用svg格式,因此chartist.js可以很灵活的在web页面上应用。
- 响应式图表,支持不同的浏览器尺寸和分辨率。
- 支持自定义 sass 架构。
chartist.js的使用方法
首先你需要在其官方网站中下载js包和css包,并且在页面中引用它们:
<link rel="stylesheet" href="bower_components/chartist/dist/chartist.min.css" rel="external nofollow" > <script src="bower_components/chartist/dist/chartist.min.js">
下面我们对一些常用的图表类型做一个简单的介绍。
带tooltip提示的线形图
效果图:
javascript代码:
new chartist.line('.ct-chart', { labels: ['1', '2', '3', '4', '5', '6'], series: [ { name: 'fibonacci sequence', data: [1, 2, 3, 5, 8, 13] }, { name: 'golden section', data: [1, 1.618, 2.618, 4.236, 6.854, 11.09] } ] }); var easeoutquad = function (x, t, b, c, d) { return -c * (t /= d) * (t - 2) + b; }; var $chart = $('.ct-chart'); var $tooltip = $chart .append('<div class="tooltip"></div>') .find('.tooltip') .hide(); $chart.on('mouseenter', '.ct-point', function() { var $point = $(this), value = $point.attr('ct:value'), seriesname = $point.parent().attr('ct:series-name'); $point.animate({'stroke-width': '50px'}, 300, easeoutquad); $tooltip.html(seriesname + '<br>' + value).show(); }); $chart.on('mouseleave', '.ct-point', function() { var $point = $(this); $point.animate({'stroke-width': '20px'}, 300, easeoutquad); $tooltip.hide(); }); $chart.on('mousemove', function(event) { $tooltip.css({ left: (event.offsetx || event.originalevent.layerx) - $tooltip.width() / 2 - 10, top: (event.offsety || event.originalevent.layery) - $tooltip.height() - 40 }); });
多维度的柱形图
效果图:
javascript代码:
new chartist.bar('.ct-chart', { labels: ['first quarter of the year', 'second quarter of the year', 'third quarter of the year', 'fourth quarter of the year'], series: [ [60000, 40000, 80000, 70000], [40000, 30000, 70000, 65000], [8000, 3000, 10000, 6000] ] }, { seriesbardistance: 10, axisx: { offset: 60 }, axisy: { offset: 80, labelinterpolationfnc: function(value) { return value + ' chf' }, scaleminspace: 15 } });
简单的饼图
效果图:
javascript代码:
var data = { labels: ['bananas', 'apples', 'grapes'], series: [20, 15, 40] }; var options = { labelinterpolationfnc: function(value) { return value[0] } }; var responsiveoptions = [ ['screen and (min-width: 640px)', { chartpadding: 30, labeloffset: 100, labeldirection: 'explode', labelinterpolationfnc: function(value) { return value; } }], ['screen and (min-width: 1024px)', { labeloffset: 80, chartpadding: 20 }] ]; new chartist.pie('.ct-chart', data, options, responsiveoptions);
更多关于chartist.js的用法,可以前往其官方网站进行查阅,包括详细地api。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 详解动画插件wow.js的使用方法
下一篇: 微信禁止下拉查看URL的处理方法