JavaScript中的图表

图表在数据可视化中扮演着非常重要的角色，而JavaScript中的图表库则为程序员提供了方便快捷的绘制图表的工具。本文将介绍几个常用的JavaScript图表库。

1. Chart.js

Chart.js是一个轻量级的JavaScript图表库，常用于绘制饼状图、柱状图、折线图等。

安装

通过npm安装

npm install chart.js

示例

下面是一个简单的柱状图示例：

<canvas id="myChart"></canvas>

import Chart from 'chart.js';

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'bar',
  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
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

代码片段说明：

• 首先使用import Chart from 'chart.js';导入Chart.js
• 然后通过document.getElementById('myChart').getContext('2d')获取canvas的上下文
• 接着通过数据填充data属性，设置图表类型type，以及各种样式等选项options，绘制一个柱状图

优缺点

Chart.js的优点在于轻量级，易学易用，支持丰富的图表类型；缺点则是定制性较差，不太适合绘制高度自定义的图表。

2. Highcharts

Highcharts是一款功能强大的JavaScript图表库，适合绘制各种图表类型，例如趋势图、热力图、地图等。

安装

通过npm安装

npm install highcharts

或者直接在HTML中引入

<script src="https://code.highcharts.com/highcharts.js"></script>

示例

下面是一个简单的柱状图示例：

<div id="container"></div>

import Highcharts from 'highcharts';

// 构造数据
const data = [
  ['Firefox',   44.2],
  ['IE7',       26.6],
  ['IE6',       20],
  ['Chrome',    3.1],
  ['Safari',    2.7],
  ['Opera',     2.3],
  ['Mozilla',   0.2]
];

// 绘制图表
const chart = Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Browser market shares. January, 2018'
  },
  subtitle: {
    text: 'Click the columns to view versions. Source: <a href="http://statcounter.com" target="_blank">statcounter.com</a>'
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    title: {
      text: 'Total percent market share'
    }
  },
  legend: {
    enabled: false
  },
  plotOptions: {
    series: {
      borderWidth: 0,
      dataLabels: {
        enabled: true,
        format: '{point.y:.1f}%'
      }
    }
  },

  tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
  },

  series: [{
    name: 'Brands',
    colorByPoint: true,
    data: data
  }]
});

代码片段说明：

• 首先使用import Highcharts from 'highcharts';导入Highcharts
• 然后通过构造数据，构建一个简单的柱状图
• 设置图表类型type、各种样式等选项后，通过Highcharts.chart('container', options)绘制

优缺点

Highcharts的优点在于功能强大，支持丰富的图表类型，同时具备很高的定制性；缺点则是商业性质，需要付费才能在商业环境中使用。

3. D3.js

D3.js是一个数据驱动的JavaScript可视化库，它以数据为中心，可以灵活构建各种复杂的图表类型。

安装

通过npm安装

npm install d3

示例

下面是一个简单的柱状图示例：

<div id="chart"></div>

import * as d3 from 'd3';

// 构建数据
const data = [
  { name: 'foo', value: 10 },
  { name: 'bar', value: 20 },
  { name: 'baz', value: 30 },
  { name: 'qux', value: 40 },
];

// 构建比例尺
const x = d3.scaleBand().domain(data.map(d => d.name)).range([0, 300]).padding(0.1);
const y = d3.scaleLinear().domain([0, 40]).range([150, 0]);

// 构建坐标系
const xAxis = g => g.attr('transform', 'translate(0,150)').call(d3.axisBottom(x));
const yAxis = g => g.call(d3.axisLeft(y));

// 构建矩形
const rect = g => g.selectAll('rect').data(data).join('rect')
  .attr('x', d => x(d.name))
  .attr('y', d => y(d.value))
  .attr('height', d => y(0) - y(d.value))
  .attr('width', x.bandwidth())
  .attr('fill', 'steelblue');

// 构建svg元素
const svg = d3.select('#chart').append('svg').attr('viewBox', [0, 0, 300, 150]);

// 绘制图表
svg.append('g').call(xAxis);
svg.append('g').call(yAxis);
svg.append('g').call(rect);

代码片段说明：

• 首先通过import * as d3 from 'd3';将所有d3的API导入
• 然后通过构建数据，并使用d3构建比例尺d3.scaleBand()和d3.scaleLinear()，构建坐标系，构建矩形元素等，构建一个简单的柱状图
• 最后将svg元素插入到HTML中

优缺点

D3.js的优点在于可定制性极高，完全可以根据需求自定义各种复杂的图表；缺点则是上手难度较高，需要一定的SVG和JavaScript知识基础。

总结

本文介绍了三款常用的JavaScript图表库，它们分别是Chart.js、Highcharts和D3.js，它们各有优劣，程序员可以根据自身需求选择合适的库。