1. 前言
随着 Web 技术的不断发展，人们对于数据可视化越来越有需求。而 JavaScript 作为 Web 开发的一种主流语言，其库也越来越丰富。本篇文章主要介绍前 8 个免费的 JavaScript 库，供开发者参考。
2. D3.js
2.1 简介
D3.js 是一款可用于数据可视化的开放源代码的 JavaScript 库。该库通过使用 HTML、SVG 和 CSS，让数据与页面自然结合，可以轻松地创建动态、交互式的图表。该库相比其他库能够自由定制更复杂的可视化效果。
2.2 重要特性
强大的可视化能力：可以创建各种各样的图表，包括条形图、折线图、饼图、力导向图等等。
动态交互性：可以通过动态交互，使得图表更加生动鲜活。
兼容性好：D3.js 可以使用在现代浏览器、移动设备等所有平台上。
2.3 示例
// 引入 D3.js
import * as d3 from 'd3';
// 创建 SVG 容器
const svg = d3.select('body')
.append('svg')
.attr('width', 600)
.attr('height', 400);
// 创建数据
const data = [10, 20, 30, 40, 50];
// 创建柱状图
svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('x', (d, i) => i * 70)
.attr('y', (d, i) => 400 - d * 5)
.attr('width', 50)
.attr('height', (d, i) => d * 5);
3. Chart.js
3.1 简介
Chart.js 是一个简单、灵活的 JavaScript 库，用于创建响应式的图表。它构建在 HTML5 的 Canvas 元素上，可以创建各种各样的图表类型，包括条形图、饼图、折线图等等。
3.2 重要特性
响应式：可以根据屏幕的大小自适应调整图表的显示效果。
易于使用：简洁的 API，易于创建各种各样的图表。
跨浏览器支持：支持大多数现代浏览器和设备。
3.3 示例
// 引入 Chart.js
import Chart from 'chart.js/auto';
// 创建数据
const data = {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
};
// 创建图表
const chart = new Chart(document.getElementById('my-chart'), {
type: 'bar',
data,
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
4. Highcharts
4.1 简介
Highcharts 是一款非常受欢迎的 JavaScript 图表库，支持多种类型的图表，如折线图、柱状图、饼图等等。它使用 SVG 技术来渲染图表，提供了丰富的 API，使得用户可以自定义图表。
4.2 重要特性
多种类型的图表：支持折线图、柱状图、饼图等多种类型的图表。
丰富的 API：提供了丰富的 API，可以自定义图表的各个属性。
跨平台支持：支持大多数现代浏览器和设备。
4.3 示例
// 引入 Highcharts
import Highcharts from 'highcharts';
// 创建数据
const data = {
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Rainfall (mm)'
}
},
series: [{
name: 'Tokyo',
data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}, {
name: 'New York',
data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]
}, {
name: 'London',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}]
};
// 创建图表
Highcharts.chart('container', data);
5. FusionCharts
5.1 简介
FusionCharts 是一款全方位的 JavaScript 图表库，支持超过 100 种类型的图表。它使用 SVG 和 VML 技术来渲染图表，支持动态交互和即时数据更新。除了传统的图表类型，还支持地图、仪表盘、树状图、热力地图等高级数据可视化方式。
5.2 重要特性
丰富的图表类型：支持超过 100 种类型的图表，包括传统的线性图、饼图、柱状图，以及高级的地图、仪表盘、树状图等。
动态交互：支持动态交互和即时数据更新。
跨平台支持：支持所有现代浏览器和设备。
5.3 示例
// 引入 FusionCharts
import FusionCharts from 'fusioncharts';
// 引入图表类型和主题
import Column2D from 'fusioncharts/viz/column2d';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
// 引入数据
const data = {
chart: {
caption: 'Monthly revenue for last year',
subCaption: 'Harry\'s SuperMart',
xAxisName: 'Month',
yAxisName: 'Revenue (In USD)',
numberPrefix: '$',
theme: 'fusion'
},
data: [{
label: 'Jan',
value: '420000'
}, {
label: 'Feb',
value: '810000'
}, {
label: 'Mar',
value: '720000'
}, {
label: 'Apr',
value: '550000'
}, {
label: 'May',
value: '910000'
}, {
label: 'Jun',
value: '510000'
}, {
label: 'Jul',
value: '680000'
}, {
label: 'Aug',
value: '620000'
}, {
label: 'Sep',
value: '610000'
}, {
label: 'Oct',
value: '490000'
}, {
label: 'Nov',
value: '900000'
}, {
label: 'Dec',
value: '730000'
}]
};
// 创建图表
FusionCharts.addDep(Column2D);
FusionCharts.addDep(FusionTheme);
const chart = new FusionCharts({
type: 'column2d',
renderAt: 'container',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: data
});
chart.render();
6. ECharts
6.1 简介
ECharts 是百度团队推出的一个数据可视化库，采用了 Canvas 和 SVG 技术绘制图表，支持条形图、折线图、饼图、散点图、地图等多种类型的图表，且可以进行多图联动、动态数据更新等操作。
6.2 重要特性
多种类型的图表：支持条形图、折线图、饼图、散点图、地图等多种类型的图表。
动态交互：可以进行多图联动、动态数据更新等操作。
跨浏览器支持：支持所有现代浏览器和设备。
6.3 示例
// 引入 ECharts
import * as echarts from 'echarts';
// 创建数据
const data = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
// 创建图表
const chart = echarts.init(document.getElementById('my-chart'));
chart.setOption(data);
7. Google Charts
7.1 简介
Google Charts 是由 Google 推出的一款数据可视化库，支持多种类型的图表，如条形图、折线图、饼图等等。它使用 SVG 技术来渲染图表，支持动态交互和即时数据更新。
7.2 重要特性
多种类型的图表：支持多种类型的图表，包括条形图、折线图、饼图等等。
动态交互：支持动态交互和即时数据更新。
跨浏览器支持：支持所有现代浏览器和设备。
7.3 示例
// 引入 Google Charts
import { google } from 'google-charts';
// 加载图表库
google.charts.load('current', { packages: ['corechart'] });
// 创建数据
const data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
// 配置选项
const options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
// 创建图表
const chart = new google.visualization.LineChart(document.getElementById('my-chart'));
chart.draw(data, options);
8. Plotly.js
8.1 简介
Plotly.js 是一款开源的基于浏览器的数据可视化库，支持多种类型的图表，如条形图、折线图、散点图、3D 图形等等。它可以通过 JavaScript、Python、R 等多个语言使用。
8.2 重要特性
多种类型的图表：支持多种类型的图表，包括条形图、折线图、散点图等等。
跨平台支持：支持所有现代浏览器和设备。
支持多种语言：可以通过 JavaScript、Python、R 等多个语言使用。
8.3 示例
// 引入 Plotly.js
import Plotly from 'plotly.js';
// 创建数据
const trace1 = {
x: [1, 2, 3, 4],
y: [10, 11, 12, 13],
mode: 'lines',
type: 'scatter'
};
const trace2 = {
x: [1, 2, 3, 4],
y: [12, 13, 11, 10],
mode: 'lines+markers',
type: 'scatter'
};
const data = [trace1, trace2];
// 配置选项
const layout = {
title: 'Line and Scatter Plot'
};
// 创建图表
Plotly.newPlot('my-chart', data, layout);
9. 总结
本篇文章介绍了可用于数据可视化的前 8 个免费 JavaScript 库，分别是 D3.js、Chart.js、Highcharts、FusionCharts、ECharts、Google Charts 和 Plotly.js。它们都有各自的特点和重要特性，开发者可以根据实际需求选择适合