什么是Chart.js，有什么特点

最新推荐文章于 2025-04-06 06:12:24 发布
最新推荐文章于 2025-04-06 06:12:24 发布
阅读量1.5k 收藏 25
点赞数 33
文章标签： javascript 信息可视化 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zhao_0912/article/details/143945340
版权

什么是 Chart.js？

Chart.js 是一个开源的 JavaScript 图表库，可以用于在网页上绘制各种图表。它基于 HTML5 Canvas 技术，提供了丰富的图表类型和高度可定制的选项，使得开发者可以轻松地在网页上创建交互式和动态的图表。Chart.js 由 Nick Downie 创建，目前由 Chart.js 社区维护，广泛应用于数据分析、仪表盘、报告等场景。

Chart.js 的核心概念

  1. Canvas：Chart.js 使用 HTML5 Canvas 元素来绘制图表。Canvas 是一个可以绘制图形的区域，通过 JavaScript 可以在 Canvas 上绘制各种图形和文本。

  2. 图表类型：Chart.js 支持多种图表类型，包括折线图、柱状图、饼图、雷达图、极坐标图、散点图等。

  3. 数据集：每个图表可以包含一个或多个数据集，每个数据集代表一组数据。数据集可以有不同的颜色、样式和标签。

  4. 配置选项：Chart.js 提供了丰富的配置选项，可以自定义图表的外观和行为，如标题、图例、轴标签、网格线等。

  5. 事件处理：Chart.js 支持事件处理，可以监听图表上的点击、悬停等事件，实现交互式效果。

  6. 动画：Chart.js 支持动画效果，可以平滑地展示数据的变化过程。

Chart.js 的特点

  1. 轻量级：Chart.js 体积小，加载速度快，适合在各种设备上使用。

  2. 丰富的图表类型：支持多种图表类型，满足不同的数据可视化需求。

  3. 高度可定制：提供了丰富的配置选项，可以自定义图表的外观和行为。

  4. 交互性强：支持事件处理和动画效果，可以实现交互式图表。

  5. 易于使用：API 设计简洁，文档详细，容易上手。

  6. 社区支持：拥有活跃的社区和丰富的资源，可以快速解决遇到的问题。

Chart.js 的作用

  1. 数据可视化：Chart.js 可以将复杂的数据以图表的形式展示出来，便于用户理解和分析。

  2. 交互式图表：支持事件处理和动画效果，可以实现交互式图表，提升用户体验。

  3. 仪表盘和报告：广泛应用于仪表盘、报告等场景，帮助用户实时监控和分析数据。

  4. 跨平台：基于 HTML5 和 JavaScript，可以在各种设备和平台上使用。

  5. 集成方便：可以轻松集成到现有的项目中，与其他前端框架（如 React、Vue 等）配合使用。

示例说明

为了更好地理解 Chart.js 的工作原理和优势，我们通过几个具体的示例来说明。

安装 Chart.js

首先，确保你已经安装了 Chart.js。如果还没有安装，可以使用以下方法之一：

  1. 通过 CDN 引入：

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

  2. 通过 npm 安装：

    npm install chart.js
基本用法

  1. 折线图

    <!DOCTYPE html>
<html>
<head>
  <title>Chart.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="400"></canvas>
  <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
          label: 'Monthly Sales',
          data: [65, 59, 80, 81, 56, 55, 40],
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderColor: 'rgba(255, 99, 132, 1)',
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
</html>

  2. 柱状图

    <!DOCTYPE html>
<html>
<head>
  <title>Chart.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="400"></canvas>
  <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: '# 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: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
</html>

  3. 饼图

    <!DOCTYPE html>
<html>
<head>
  <title>Chart.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="400"></canvas>
  <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'pie',
      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: {
        responsive: true
      }
    });
  </script>
</body>
</html>

  4. 雷达图

    <!DOCTYPE html>
<html>
<head>
  <title>Chart.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="400"></canvas>
  <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'radar',
      data: {
        labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
        datasets: [{
          label: 'My First Dataset',
          data: [65, 59, 90, 81, 56, 55, 40],
          fill: true,
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderColor: 'rgb(255, 99, 132)',
          pointBackgroundColor: 'rgb(255, 99, 132)',
          pointBorderColor: '#fff',
          pointHoverBackgroundColor: '#fff',
          pointHoverBorderColor: 'rgb(255, 99, 132)'
        }]
      },
      options: {
        scales: {
          r: {
            suggestedMin: 0,
            suggestedMax: 100
          }
        }
      }
    });
  </script>
</body>
</html>

  5. 极坐标图

    <!DOCTYPE html>
<html>
<head>
  <title>Chart.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="400"></canvas>
  <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'polarArea',
      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: {
        responsive: true
      }
    });
  </script>
</body>
</html>

  6. 散点图

    <!DOCTYPE html>
<html>
<head>
  <title>Chart.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="400"></canvas>
  <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'scatter',
      data: {
        datasets: [{
          label: 'Scatter Dataset',
          data: [{ x: -10, y: 0 }, { x: 0, y: 10 }, { x: 10, y: 5 }],
          backgroundColor: 'rgb(255, 99, 132)'
        }]
      },
      options: {
        scales: {
          x: {
            type: 'linear',
            position: 'bottom'
          }
        }
      }
    });
  </script>
</body>
</html>

高级用法

动态更新数据

Chart.js 支持动态更新数据，可以在运行时修改图表的数据集。

<!DOCTYPE html>
<html>
<head>
  <title>Chart.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="400"></canvas>
  <button onclick="updateData()">Update Data</button>
  <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
          label: 'Monthly Sales',
          data: [65, 59, 80, 81, 56, 55, 40],
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderColor: 'rgba(255, 99, 132, 1)',
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });

    function updateData() {
      myChart.data.datasets[0].data = [30, 40, 50, 60, 70, 80, 90];
      myChart.update();
    }
  </script>
</body>
</html>
事件处理

Chart.js 支持事件处理，可以监听图表上的点击、悬停等事件，实现交互式效果。

<!DOCTYPE html>
<html>
<head>
  <title>Chart.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="400"></canvas>
  <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: '# 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: {
          y: {
            beginAtZero: true
          }
        },
        onClick: (event, elements) => {
          if (elements.length > 0) {
            const index = elements[0].index;
            alert(`Clicked on ${myChart.data.labels[index]} with value ${myChart.data.datasets[0].data[index]}`);
          }
        }
      }
    });
  </script>
</body>
</html>
多个数据集

Chart.js 支持在一个图表中绘制多个数据集，可以用来比较不同数据之间的关系。

<!DOCTYPE html>
<html>
<head>
  <title>Chart.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="400"></canvas>
  <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [
          {
            label: 'Sales',
            data: [65, 59, 80, 81, 56, 55, 40],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
          },
          {
            label: 'Expenses',
            data: [28, 48, 40, 19, 86, 27, 90],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1
          }
        ]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
</html>

实现细节

折线图

  1. 基本折线图

    <!DOCTYPE html>
<html>
<head>
  <title>Chart.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="400"></canvas>
  <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
          label: 'Monthly Sales',
          data: [65, 59, 80, 81, 56, 55, 40],
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderColor: 'rgba(255, 99, 132, 1)',
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
</html>

  2. 带阴影的折线图

    <!DOCTYPE html>
<html>
<head>
  <title>Chart.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="400"></canvas>
  <script>
    const ctx = document.getElementById('myChart').getContext('2d');
    const myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
          label: 'Monthly Sales',
          data: [65, 59, 80, 81, 56, 55, 40],
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderColor: 'rgba(255, 99, 132, 1)',
          borderWidth: 1,
          fill: true
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
</html>
柱状图

  1. 基本柱状图

    <!DOCTYPE html>
<html>
<head>
  <title>Chart.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="400"></canvas>
  <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: '# 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: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
</html>

  2. 水平柱状图

    <!DOCTYPE html>
<html>
<head>
  <title>Chart.js Example</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
  <canvas id="myChart" width="400" height="400"></canvas>
  <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: '# 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: {
        indexAxis: 'y',
        scales: {
          x: {
            beginAtZero: true
          }
        }
      }
    });
  </script>
</body>
</html>

总结

Chart.js 是一个强大且灵活的 JavaScript 图表库，基于 HTML5 Canvas 技术，提供了丰富的图表类型和高度可定制的选项。通过使用 Chart.js，可以轻松地在网页上创建交互式和动态的图表，提升数据可视化的质量和用户体验。希望本文的介绍和示例能够帮助你更好地理解和应用 Chart.js。

Chart.js 教程：开启数据可视化之旅
qq_56706777的博客
03-01 1064
Chart.js 是一个开源的 JavaScript 库，专注于为网页提供直观的数据可视化解决方案。它具有简洁的 API 设计，使得无论是经验丰富的开发者还是新手，都能快速上手。Chart.js 支持多种常见的图表类型，如柱状图、折线图、饼图、散点图等，能够满足各种不同场景下的数据展示需求。同时，其丰富的配置选项允许开发者对图表进行高度定制，以适应项目的独特风格和要求。通过本文的介绍，你已经对 Chart.js 有了一个全面的了解，从基础的引入和创建简单图表，到深入探索多种图表类型和丰富的配置定制选项。
Chart.js 柱形图
最新发布
csbysj2020的博客
04-07 299
本文介绍了如何使用 Chart.js 创建和定制柱形图。通过引入库、准备容器、初始化图表等步骤，可以轻松地将柱形图嵌入到 Web 应用中。同时，通过定制数据、样式和交互，可以进一步优化图表的展示效果。希望本文对您有所帮助！
Chart.js 混合图
lly202406的博客
04-06 310
Chart.js 混合图是一种功能强大的图表类型，它能够将不同类型的数据以直观、美观的方式展示在同一图表中。通过本文的介绍，相信您已经对 Chart.js 混合图有了初步的了解。在实际应用中，您可以根据自己的需求调整图表的配置项，以获得最佳的展示效果。
Chart js Demo
01-29
版本1.0.1.4，添加了鼠标点击事件，将曲线改为折线
数据可视化(1)--Chart.js
weixin_34162228的博客
12-11 282
Chart.js是一个HTML5图表库，使用canvas元素来展示各式各样的客户端图表，支持折线图、柱形图、雷达图、饼图、环形图等。在每种图表中，还包含了大量的自定义选项，包括动画展示形式。 Chart.js比较轻量（gzip版本仅4.5k），且不依赖其他库。 项目官网：http://www.chartjs.org/ 曲线图（Line chart） &lt;!doctype html&g...
2017不容错过的Chart.js入门教程
xgocn的专栏
01-17 8068
Chart.js是一个简单、面向对象、为设计者和开发者准备的图表绘制工具库。   相信大部分人都一样，看到一大筐用文本或者表格形式呈现的数据就头疼。因为这种呈现方式也太无聊了吧。。。而且这对于我们处理原始数据也造成一定的困难。 不信？我反手就是一个例子： 更进一步说，柱状图能够直观的显示出趋势或者事实。以这张表格为例，柱状图会直观地告诉你美国的人口是孟加拉的两倍，中国的人口是俄罗斯
char.js
weixin_33787529的博客
03-26 176
https://www.cnblogs.com/haosit/p/6928165.html http://chartjs.cn/docs/#line-chart-chart-options 转载于:https://www.cnblogs.com/yuyedaocao/p/10601603.html
前端必知必会-Chart.js
qq_24018193的博客
01-06 715
本文介绍了Chart.js的使用，如有问题欢迎私信和评论。
QML+Chart.js 实现图表显示
10-26
本文将深入探讨如何利用`QML`（Qt Quick）和`Chart.js`来实现图表显示，以及它们各自的特点和优势。 首先，让我们了解一下`QML`。`QML`是Qt框架的一部分，它是一种声明式语言，用于构建用户界面。它的设计使得UI的...
Javascript图形库 Chart.js.zip
09-17
总之，Chart.js是JavaScript世界里一款强大的图形库，无论是在网页应用还是移动应用中，都能轻松实现数据可视化，为开发者提供了一个高效、灵活的工具来呈现复杂的数据。通过深入理解和熟练运用，我们可以构建出美观...
chart.js-javascript
08-12
web绘制饼图柱状图线图的利器。使用javascript进行图形绘制。
Chart.js案例
09-13
chart.js是一款基于HTML5 Canvas的图表插件，其功能非常强大，不仅提供了常见的柱形图、折线图、饼状图，还提供了环形图、雷达图，样式外观多样，图表的色彩搭配也比较清新。
Chart.js功能与使用方法小结
10-15
然后在JavaScript文件中引入Chart.js，例如`import Chart from 'chart.js';`。之后，就可以开始创建图表了。 创建一个图表通常包括几个步骤：首先定义一个HTML的canvas元素，然后创建一个Chart对象并设置图表的类型...
Chart.StackedArea.js:Chart.js的StackedArea实现
05-02
### Chart.StackedArea.js的特点 1. **堆叠效果**：`Chart.StackedArea.js`扩展了`Chart.js`的基本功能，提供了堆叠区域图的绘制能力，使用户能够更直观地理解各个数据系列对整体的贡献。 2. **自定义配置**：用户...
JavaScript 可视化案例 D3.js Chart.js 使用教程 图表实现 柱状图 饼状图 条形图 折现图等
weixin_42462436的博客
10-02 768
JavaScript可视化图表 引用D3.JS 库 引用 Chart.js 柱状图 饼图 条形图 折现图
chartjs
刚刚好
07-14 449
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" co
chartjs配置说明文档
qq_39460057的博客
03-03 2715
chartjs的安装和使用说明
Chart.js入门：简介
代码教主
06-15 1656
人们通常不希望浏览大量以文本或表格形式呈现给他们的数据。 大多数情况下，这是因为它很无聊，但更重要的是，处理原始数字要困难一些。 例如，这是世界上人口最多的十个国家的表格： 国名 人口 中国 1,379,302,771 印度 1,281,935,911 美国 326,625,791 印度尼西亚 260,580,739 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值