用 JS 介绍图表 - Javascript

Javascript 是前端开发领域中最热门的编程语言之一，它可以用来开发交互式的 Web 应用、数据可视化和图表等功能。在本文中，我们将介绍如何使用 Javascript 来制作和呈现各种类型的图表。

为什么使用 Javascript 制作图表？

Javascript 具有以下优点，使其成为制作图表的理想选择：

• Javascript 兼容性极高，可在多种设备和浏览器中运行。
• Javascript 的库和框架数量众多，多数都在开源社区开发和维护。
• Javascript 可以利用 HTML 和 CSS 来呈现图表，使得它们的视觉外观可以轻松自定义和调整。
• Javascript 具有出色的交互性和动态性，能够响应用户交互行为，更新数据和图表。

常用 Javascript 图表库

以下是一些常用的 Javascript 图表库：

1. D3.js

D3.js（Data-Driven Documents）是一个开放源代码的 Javascript 库，用于创建动态数据可视化的交互式图表和图形。它可帮助您将数据转换为各种格式的图表，包括折线图、饼图、力导向图和地图等。

以D3.js制作折线图为例：

![D3.js line chart](https://bl.ocks.org/d3noob/raw/4414436e184d8f59cf6365256db951ca/)

2. Chart.js

Chart.js 是一个极简的 Javascript 库，用于创建各种类型的响应式图表，支持折线图、柱状图、饼图和雷达图等。Chart.js 具有简单的 API 和易于使用的文档，是初学者和专业人士的不二之选。

以 Chart.js 制作柱状图为例：

![Chart.js bar chart](https://www.chartjs.org/2.9.3/samples/bar/stacked.html)

3. Highcharts

Highcharts 是一个纯 Javascript 插件，用于创建精美、响应式的图表和图形。它支持多种类型的图表，包括折线图、柱状图、散点图和热力图等，并提供了多种成熟的主题和样式，可以让您轻松自定义您的图表。

以 Highcharts 制作散点图为例：

![Highcharts scatter chart](https://www.highcharts.com/demo/scatter)

Javascript 图表库的使用示例

以下是一个使用 D3.js 制作折线图的简单示例：

// 定义数据
var data = [
  { date: '2021/01/01', count: 100 },
  { date: '2021/01/02', count: 200 },
  { date: '2021/01/03', count: 300 },
  { date: '2021/01/04', count: 400 },
  { date: '2021/01/05', count: 500 }
];

// 定义 SVG 元素和 DOM 元素的宽高
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// 定义 x 和 y 轴的比例尺
var x = d3.scaleTime()
    .range([0, width]);
    
var y = d3.scaleLinear()
    .range([height, 0]);

// 定义线条生成器
var line = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.count); });

// 创建 SVG 元素
var svg = d3.select('body').append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
  .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

// 解析和转换日期格式
var parseTime = d3.timeParse('%Y/%m/%d');
data.forEach(function(d) {
  d.date = parseTime(d.date);
  d.count = +d.count;
});

// 定义 x 和 y 轴的域范围
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain(d3.extent(data, function(d) { return d.count; }));

// 添加 x 轴
svg.append('g')
    .attr('transform', 'translate(0,' + height + ')')
    .call(d3.axisBottom(x));

// 添加 y 轴
svg.append('g')
    .call(d3.axisLeft(y));

// 添加路径元素
svg.append('path')
    .datum(data)
    .attr('fill', 'none')
    .attr('stroke', 'steelblue')
    .attr('stroke-width', 1.5)
    .attr('d', line);

在这个示例中，我们使用 D3.js 创建了一个折线图，它显示了每个日期对应的数量。我们首先定义了一个数据数组，然后使用 d3.scaleTime() 和 d3.scaleLinear() 来定义 x 和 y 轴的比例尺。接着，我们使用 d3.line() 定义了一个线条生成器，用于将数据转换为可以呈现的路径。最后，我们创建了 SVG 元素，并添加了轴和路径元素。最终呈现的折线图将显示在浏览器中。

结论

通过 Javascript，我们可以使用多种库和框架来创建各种类型的精美、动态和交互式图表。如果您正在寻找一种灵活、易于使用且具有一流功能的图表制作工具，则 Javascript 是最理想的选择之一。