Chart.js的应用实例

于 2025-03-07 11:26:42 发布
阅读量551 收藏 2
点赞数 12
文章标签： javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u013334925/article/details/146091270
版权

Chart.js 是一个流行的开源 JavaScript 图表库，用于在网页上创建各种类型的图表（如折线图、柱状图、饼图等）。它简单易用，支持高度定制化，并且兼容现代浏览器。

以下是 Chart.js 的应用实例，展示如何创建不同类型的图表。

1. 引入 Chart.js

首先，需要在 HTML 文件中引入 Chart.js 库。可以通过 CDN 或本地文件引入。

使用 CDN
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
使用本地文件
<script src="path/to/chart.js"></script>

2. 创建画布

在 HTML 中创建一个 <canvas> 元素，用于渲染图表。

<canvas id="myChart" width="400" height="200"></canvas>

3. 创建图表

使用 JavaScript 初始化图表，并配置数据和选项。

4. 示例：折线图

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js 折线图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="lineChart" width="400" height="200"></canvas>

    <script>
        const ctx = document.getElementById('lineChart').getContext('2d');
        const lineChart = new Chart(ctx, {
            type: 'line', // 图表类型
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], // X 轴标签
                datasets: [{
                    label: 'My First Dataset', // 数据集标签
                    data: [65, 59, 80, 81, 56, 55, 40], // 数据
                    backgroundColor: 'rgba(75, 192, 192, 0.2)', // 背景颜色
                    borderColor: 'rgba(75, 192, 192, 1)', // 边框颜色
                    borderWidth: 1 // 边框宽度
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true // Y 轴从 0 开始
                    }
                }
            }
        });
    </script>
</body>
</html>

5. 示例：柱状图

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js 柱状图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="barChart" width="400" height="200"></canvas>

    <script>
        const ctx = document.getElementById('barChart').getContext('2d');
        const barChart = new Chart(ctx, {
            type: 'bar', // 图表类型
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], // X 轴标签
                datasets: [{
                    label: 'My First 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 // Y 轴从 0 开始
                    }
                }
            }
        });
    </script>
</body>
</html>

6. 示例：饼图

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js 饼图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="pieChart" width="400" height="200"></canvas>

    <script>
        const ctx = document.getElementById('pieChart').getContext('2d');
        const pieChart = new Chart(ctx, {
            type: 'pie', // 图表类型
            data: {
                labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], // 标签
                datasets: [{
                    label: 'My First 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: {
                responsive: true, // 图表自适应
                plugins: {
                    legend: {
                        position: 'top', // 图例位置
                    },
                    title: {
                        display: true,
                        text: 'Pie Chart Example' // 图表标题
                    }
                }
            }
        });
    </script>
</body>
</html>

7. 示例：动态更新图表

可以通过更新数据动态刷新图表。

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js 动态更新示例</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="dynamicChart" width="400" height="200"></canvas>
    <button id="updateButton">更新数据</button>

    <script>
        const ctx = document.getElementById('dynamicChart').getContext('2d');
        const dynamicChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                datasets: [{
                    label: 'My First Dataset',
                    data: [65, 59, 80, 81, 56, 55, 40],
                    backgroundColor: 'rgba(75, 192, 192, 0.2)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // 更新数据
        document.getElementById('updateButton').addEventListener('click', () => {
            const newData = [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100];
            dynamicChart.data.datasets[0].data = newData;
            dynamicChart.update(); // 更新图表
        });
    </script>
</body>
</html>

8. 总结

  • Chart.js 是一个功能强大且易于使用的图表库，支持多种图表类型。

  • 通过简单的配置，可以创建折线图、柱状图、饼图等。

  • 支持动态更新数据，适用于实时数据展示场景。

通过以上示例，你可以快速上手 Chart.js 并在项目中应用。

Chart.js 使用示例
u013993319的博客
04-26 1万+
从MySql 数据库中获取数据 ，利用chart.js 绘制柱形图。 文件结构：![这里写图片描述](http://img.blog.csdn.net/20160426120319043)1. index.php文件。从数据库获取数据。先连接数据库exercisedata，然后从数据库的users表中查询学生名字userName和学生的成绩score，并给userName和score取别名la
Chart.js 混合图
最新发布
lly202406的博客
04-06 323
Chart.js 混合图是一种功能强大的图表类型，它能够将不同类型的数据以直观、美观的方式展示在同一图表中。通过本文的介绍，相信您已经对 Chart.js 混合图有了初步的了解。在实际应用中，您可以根据自己的需求调整图表的配置项，以获得最佳的展示效果。
Chart.js案例
09-13
chart.js是一款基于HTML5 Canvas的图表插件，其功能非常强大，不仅提供了常见的柱形图、折线图、饼状图，还提供了环形图、雷达图，样式外观多样，图表的色彩搭配也比较清新。
10个Chart.js示例图表
allway2的博客
11-23 3956
Chart.js是一个功能强大的数据可视化库，但是我从经验中知道，开始并获取要显示的图形可能很棘手。各种各样的事情都可能出错，而我通常只是想让某些事情起作用，所以我可以开始进行调整。 这是一个包含10种工作图（条形图，饼图，折线图等）的列表，其中设置了颜色和数据以呈现美观的图表，您可以将其复制并粘贴到自己的项目中，并快速进行自定义和进行微调以使其适合您的风格和目的。 要使用这些示例，请确保还包括Chart.js： <script src="https://cdnjs.cloudflare....
Chart.js学习资料实例案例
10-26
Chart.js学习资料实例，全部资料 这个是目前最新版，与旧版例程有了很大的变化，值得一看。 内含多个完整的demo，包括静态和动态。chart.js是一款基于HTML5 Canvas的图表插件，其功能非常强大，不仅提供了常见的柱形图、折线图、饼状图，还提供了环形图、雷达图，样式外观多样，图表的色彩搭配也比较清新
Chart.js四个示例
w11111xxxl的博客
06-30 660
完整例子代码 具体代码在干什么看粗体加重的注释。
chartjs:Chartjs组件基于Vue Bulma的chart.js
05-18
Chartjs Chartjs组件基于Vue Bulma的 。 安装 $ npm install vue-bulma-chartjs 例子 < chart xss=removed xss=removed xss=removed></ chart> < script > import Chart from ' vue-bulma-chartjs ' ...
QML+Chart.js 实现图表显示
10-26
2. **数据传递**：将Qt应用中的数据通过JavaScript接口传递到`Chart.js`，可以使用`QML`的`js`函数或者`WebChannel`来实现双向通信。`WebChannel`允许C++和JavaScript之间安全、高效地交换数据。 3. **绘制图表**：...
JavaScript 可视化案例 D3.js Chart.js 使用教程 图表实现 柱状图 饼状图 条形图 折现图等
weixin_42462436的博客
10-02 850
JavaScript可视化图表 引用D3.JS 库 引用 Chart.js 柱状图 饼图 条形图 折现图
chart.js 和实例,绘图神器,都写好了注释,
05-23
`Chart.js`的使用通常从创建一个canvas元素开始，然后实例化一个图表对象。例如，创建一个简单的柱形图： ```html <canvas id="myChart"></canvas> var ctx = document.getElementById('myChart').getContext('...
基于Chart.js的折线图例子
09-05
基于Chart.js的折线图例子 点名了创建过程 和特殊数据的注意事项 仿写 柱状图 饼状图 不成问题
chart.js-javascript
08-12
web绘制饼图柱状图线图的利器。使用javascript进行图形绘制。
Chart.js图形报表
04-28
基于js的Chart绘制工具，各种图都有，内含简单Demo，引用js即可用基于js的Chart绘制工具，各种图都有，内含简单Demo，引用js即可用基于js的Chart绘制工具，各种图都有，内含简单Demo，引用js即可用基于js的Chart绘制工具，各种图都有，内含简单Demo，引用js即可用基于js的Chart绘制工具，各种图都有，内含简单Demo，引用js即可用基于js的Chart绘制工具，各种图都有，内含简单Demo，引用js即可用
Chart js Demo
01-29
版本1.0.1.4，添加了鼠标点击事件，将曲线改为折线
wxchart.js
12-13
微信小程序canvas开发工具。在开发小程序过程中,有项目用到图表功能, 其实wxChart.js有小程序的库,我们要吧引入进来,然后配置初始化一下,就可以达到目的了.
前端项目-OrgChart.js.zip
09-02
在ES6（ECMAScript 2015）的支持下，OrgChart.js利用了类(class)、模板字符串、解构赋值等现代JavaScript特性，提供了一种简洁、高效的方式来构建和操作组织图。例如，你可以使用类来定义图表节点，通过模板字符串来...
Chart.js 简单实战
qq_30121245的博客
11-04 961
当今世界，是数据的世界。数据是证据，是记忆，是规律，是金钱，是信息化社会的当仁不让的载体。           说起数据，可能大家觉得是枯燥的硬生生的东西。也许，他的底层是这样的，但是当数据以图表、图像、视频、音频，以及交互性的产品呈现在我们面前时，一切又是那么的生动和有趣。           我之前做过电信营业厅的系统。他们各个科室部门每个月要打印需要报表来记账和统计分析。包括话费、宽带、
chart.js使用的方法
qq_35392674的博客
05-25 585
https://www.cnblogs.com/CraryPrimitiveMan/p/3469271.html
掌握HTML5图表绘制：Chart.js库实例应用
在项目中使用Chart.js非常简单，首先需要在HTML页面中引入元素，然后通过JavaScript引入Chart.js库。之后就可以创建一个图表实例，并配置相应的选项和数据。 ```html <!-- 引入canvas元素 --> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

CsharpDev-奶豆哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值