JavaScript 可视化案例 D3.js Chart.js 使用教程图表实现柱状图饼状图条形图折现图等

本文链接：https://blog.csdn.net/weixin_42462436/article/details/142674765

JavaScript 可视化通常用于将数据以图形方式展示，以下是使用D3.js 和 Chart.js 这两种常用库进行可视化的案例。

D3.js介绍

D3.js（Data-Driven Documents）是一个用于可视化数据的 JavaScript 库，它利用网页标准（如 HTML、SVG 和 CSS）将数据绑定到文档元素。D3.js 使开发者能够以交互和动态的方式展示数据，适用于创建各种类型的图表、地图和其他数据可视化。

1. D3.js 的特点

数据驱动：D3.js 的核心思想是通过数据驱动文档的操作。开发者可以轻松地将数据绑定到 DOM 元素上，根据数据的变化动态更新可视化内容。

灵活性：D3.js 提供了丰富的 API，开发者可以完全控制可视化的各个方面，包括元素的样式、动画、交互等。

支持多种格式：D3.js 支持多种数据格式，包括 JSON、CSV、TSV 和 XML，方便从不同来源加载数据。

丰富的图形元素：D3.js 可以生成各种 SVG 图形元素，包括线条、圆形、矩形、多边形等，适合制作各种类型的图表。

动态与交互性：D3.js 支持动画效果和事件处理，使可视化更具交互性，用户可以与图表进行互动。

Chart.js介绍

Chart.js 是一个简单而灵活的开源 JavaScript 库，用于在网页上创建图表和数据可视化。它基于 HTML5 的元素，支持多种类型的图表，如线图、柱状图、饼图、雷达图、极地区域图等。Chart.js 易于使用、轻量级，并提供了许多可定制的选项。

1. 特点

易于使用：Chart.js 的 API 简单直观，便于新手快速上手。
响应式：图表可以根据容器的大小自动调整，适应不同的屏幕尺寸。
多种图表类型：支持多种图表类型，包括：
线图（Line Chart）
柱状图（Bar Chart）
饼图（Pie Chart）
雷达图（Radar Chart）
极地区域图（Polar Area Chart）
散点图（Scatter Chart）
气泡图（Bubble Chart）
可定制性：提供丰富的选项，可以轻松自定义颜色、边框、图例等。
动画效果：支持平滑的动画效果，使数据可视化更加生动。

2. 安装

可以通过多种方式安装 Chart.js：

通过 CDN：

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

通过 npm：

npm install chart.js

案例一：使用 D3.js 实现条形图

2. 引入 D3.js

首先，需要在 HTML 中引入 D3.js：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>D3.js Bar Chart</title>
    <script src="https://d3js.org/d3.v6.min.js"></script>
    <style>
        .bar {
   
            fill: steelblue;
        }
        .bar:hover {
   
            fill: orange;
        }
        .axis-label {
   
            font-size: 14px;
        }
    </style>
</head>
<body>
    <svg width="600" height="400"></svg>
    <script>
        // 数据
        const data = [30, 80, 45, 60, 20, 90, 50];

        // 设置 SVG 容器的宽高
        const width = 600;
        const height = 400;

        // 选择 SVG 容器
        const svg = d3.select("svg")
            .attr("width", width)
            .attr("height", height);

        // 设置 X 和 Y 轴的比例尺
        const xScale = d3.scaleBand()
            .domain(data.map((d, i) => i))
            .range([0, width])
            .padding(0.1);

        const yScale = d3.scaleLinear()
            .domain([0, d3.max(data)])
            .range([height, 0]);

        // 绘制条形图
        svg.selectAll(".bar")
            .data(data)
            .enter()
            .append("rect")
            .attr("class", "bar")
            .attr("x", (d, i) => xScale(i))
            .attr("y", d => yScale(d))
            .attr("width", xScale.bandwidth())
            .attr("height", d => height - yScale(d))