强大的JavaScript响应式图表Chartist.js的使用_网络技术

强大的JavaScript响应式图表Chartist.js的使用

发布时间 - 2026-01-11 03:14:38 点击率：次

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。

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

# 图表Chartist # 响应式图表Chartist # Chartist.js # JS中使用media实现响应式布局 # 利用js编写响应式侧边栏 # 纯javascript响应式树形菜单效果 # 原生JS实现响应式瀑布流布局 # JavaScript 实现一个响应式系统的解决方案 # 多维 # 做一个 # 自定义 # 更多关于 # 很方便 # 是一个非常 # 大家多多 # 数据格式 # data # sequence # Fibonacci # section # Golden # Line # chart # ct # Tooltip # src # series # labels

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：反思日记app怎么设置语言为英文-语言设置教程

下一篇：网站服务器选择指南：性能对比、配置优化与稳定运行方案解析

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：反思日记app怎么设置语言为英文-语言设置教程

下一篇：网站服务器选择指南：性能对比、配置优化与稳定运行方案解析