当前位置：首页 > JavaScript

js 实现图表

2026-02-02 03:49:16JavaScript

JavaScript 实现图表的方法

JavaScript 提供了多种库和原生方法来实现图表功能，以下是一些常见的实现方式。

使用原生 Canvas API

通过 HTML5 的 <canvas> 元素和 JavaScript 的 Canvas API，可以直接绘制图表。

const canvas = document.getElementById('chartCanvas');
const ctx = canvas.getContext('2d');

// 绘制柱状图
ctx.fillStyle = 'blue';
ctx.fillRect(50, 50, 100, 200);

ctx.fillStyle = 'green';
ctx.fillRect(200, 50, 100, 150);

使用 Chart.js

Chart.js 是一个流行的开源图表库，支持多种图表类型，如折线图、柱状图、饼图等。

安装 Chart.js：

npm install chart.js

示例代码：

import Chart from 'chart.js/auto';

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green'],
        datasets: [{
            label: 'Dataset 1',
            data: [12, 19, 3, 5],
            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)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

使用 D3.js

D3.js 是一个强大的数据可视化库，适合复杂和高度定制化的图表需求。

安装 D3.js：

npm install d3

示例代码：

import * as d3 from 'd3';

const data = [12, 19, 3, 5, 2, 3];
const svg = d3.select('body').append('svg')
    .attr('width', 400)
    .attr('height', 300);

svg.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('x', (d, i) => i * 50)
    .attr('y', (d) => 300 - d * 10)
    .attr('width', 40)
    .attr('height', (d) => d * 10)
    .attr('fill', 'steelblue');

使用 Highcharts

Highcharts 是一个商业级图表库，适合需要丰富交互功能的场景。

安装 Highcharts：

npm install highcharts

示例代码：

import Highcharts from 'highcharts';

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Sample Chart'
    },
    xAxis: {
        categories: ['Apples', 'Bananas', 'Oranges']
    },
    yAxis: {
        title: {
            text: 'Fruit eaten'
        }
    },
    series: [{
        name: 'John',
        data: [5, 7, 3]
    }, {
        name: 'Jane',
        data: [2, 4, 6]
    }]
});