当前位置：首页 > JavaScript

js实现chart

2026-02-01 12:54:00JavaScript

使用 JavaScript 实现图表

在 JavaScript 中实现图表通常需要借助第三方库，以下是几种常见的方法和库的详细介绍：

使用 Chart.js

Chart.js 是一个简单灵活的图表库，支持多种图表类型，如折线图、柱状图、饼图等。

安装 Chart.js：

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

创建一个简单的柱状图：

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: 'Dataset',
            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: {
            y: {
                beginAtZero: true
            }
        }
    }
});

使用 D3.js

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

安装 D3.js：

<script src="https://d3js.org/d3.v7.min.js"></script>

创建一个简单的折线图：

const data = [10, 20, 30, 40, 50];
const width = 500;
const height = 300;

const svg = d3.select('body').append('svg')
    .attr('width', width)
    .attr('height', height);

const line = d3.line()
    .x((d, i) => i * 50)
    .y(d => height - d);

svg.append('path')
    .datum(data)
    .attr('fill', 'none')
    .attr('stroke', 'steelblue')
    .attr('stroke-width', 2)
    .attr('d', line);

使用 Highcharts

Highcharts 是一个功能丰富的图表库，支持多种图表类型和交互功能。

安装 Highcharts：

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

创建一个简单的饼图：

Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    title: {
        text: 'Pie Chart Example'
    },
    series: [{
        name: 'Data',
        colorByPoint: true,
        data: [{
            name: 'Chrome',
            y: 61.41
        }, {
            name: 'Firefox',
            y: 11.84
        }, {
            name: 'Edge',
            y: 4.67
        }]
    }]
});

使用 ECharts

ECharts 是一个由百度开发的图表库，支持丰富的图表类型和交互功能。

安装 ECharts：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

创建一个简单的折线图：

const chartDom = document.getElementById('main');
const myChart = echarts.init(chartDom);
const option = {
    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'
    }]
};
myChart.setOption(option);