时间:2021-05-18
Chartist.js是一个非常简单而且实用的JavaScript前端图表生成器,它支持SVG格式,图表数据转换十分灵活,同时也支持多种图表展现形式,不失为一款前端开发者的开发利器。
Chartist.js的特点
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。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前言当前,AngularJS作为Javascript的MVC(也有人说是MV*,暂且不纠结这个)框架被广泛使用,它为更快且更容易地开发响应式的Web提供了强大的
baguetteBox.js是一个简单和易于使用的响应式的图像Lightbox插件,支持滑动手势在移动设备上使用。纯JavaScript实现,不依赖第三方库和插
随着响应式网站的普及,越来越多企业选择建设响应式网站。我认为响应式网站已经成为了未来网站建设发展的风向标。响应式网站具有独特的性质,强大的优势,是传统网站不能媲
一、简介Viewer.js是一款强大的图片查看器。Viewer.js有以下特点:支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转)支持水
Chart.js是一个流行的JavaScript图表库,ng2图表是Angular2+的包装器,可以轻松地将Chart.js集成到Angular中。我们来看看基