欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

强大的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 架构。

强大的JavaScript响应式图表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响应式图表Chartist.js的使用

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响应式图表Chartist.js的使用

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响应式图表Chartist.js的使用

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。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。