Chartist.js 是一款基于 SVG 的轻量级 JavaScript 图表生成库，具备配置简单、代码简洁及完全响应式的特点。本文介绍其核心优势，并通过折线图、柱状图和饼图的示例代码，演示如何快速实现带 Tooltip、多维度数据及自适应布局的图表效果。
Chartist.js 简介与特性
Chartist.js 是一款轻量且实用的前端 JavaScript 图表生成工具。它基于 SVG 格式，支持灵活的数据转换，并提供多种图表展示形式，是前端开发中构建可视化图表的有效工具。
Chartist.js 的核心特性
- 配置过程简单，能够轻松转换各类图表数据格式。
- 实现 CSS 与 JavaScript 分离，使代码结构更加简洁，便于维护和使用。
- 采用 SVG 格式渲染，使得图表在 Web 页面中具有极高的灵活性和适应性。
- 具备响应式特性，能够自动适配不同浏览器尺寸和屏幕分辨率。
- 支持自定义 SASS 架构，允许开发者根据需求调整样式。
Chartist.js 安装与配置
Chartist.js 的基本使用步骤
首先，从官方网站下载 JS 和 CSS 包，并在 HTML 页面中引入这两个文件。
<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 实现代码如下：
带 Tooltip 的折线图实现
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.js 的基本使用方法，希望能为您的学习提供参考。