简体中文 繁體中文 English Deutsch 한국 사람 بالعربية TÜRKÇE português คนไทย Français Japanese

开启辅助访问 切换到宽版

站内搜索

搜索

活动公告

通知：为庆祝网站一周年，将在5.1日与5.2日开放注册，具体信息请见后续详细公告
04-22 00:04
通知：本站资源由网友上传分享，如有违规等问题请到版务模块进行投诉，资源失效请在帖子内回复要求补档，会尽快处理！
10-23 09:31
>社区 > 科技 > 经验交流 >帖子
本版发帖返回

Chart.js插件下载安装详细教程从零开始快速掌握网页图表制作技巧实现数据可视化提升用户体验解决常见问题

威震华夏关云长
SunJu_FaceMall

3万

主题

1174

科技点

3万

积分

白金月票

碾压王

积分
32796

立华奏
发表于 2025-8-24 01:20:36 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
1. Chart.js简介

Chart.js是一个简单、灵活且功能强大的JavaScript图表库，用于在网页上创建各种响应式、交互式的图表。它基于HTML5 Canvas元素构建，支持多种图表类型，包括线图、柱状图、饼图、雷达图等，并且具有良好的跨浏览器兼容性。

Chart.js的主要优势包括：

• 轻量级：压缩后仅约11KB大小
• 响应式设计：自动适应容器大小
• 丰富的图表类型：支持8种基础图表类型及其组合
• 交互性：支持图例、工具提示、悬停效果等
• 可定制性强：提供丰富的配置选项
• 动画效果：内置平滑的渲染动画
• 开源免费：基于MIT许可证，可免费用于商业项目

2. Chart.js的下载和安装方法

2.1 通过CDN引入

最简单的方式是通过CDN（内容分发网络）引入Chart.js。只需在HTML文件中添加以下代码：
  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Chart.js 示例</title>
  8.     <!-- 引入Chart.js -->
  9.     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  10. </head>
  11. <body>
  12.     <div style="width: 800px; height: 400px;">
  13.         <canvas id="myChart"></canvas>
  14.     </div>
  15.    
  16.     <script>
  17.         // 这里将放置Chart.js的初始化代码
  18.     </script>
  19. </body>
  20. </html>
复制代码

2.2 通过NPM安装

如果你使用Node.js和构建工具（如Webpack、Parcel等），可以通过NPM安装Chart.js：
  2. npm install chart.js
复制代码

然后在JavaScript文件中导入：
  2. // ES6模块导入方式
  3. import Chart from 'chart.js/auto';
  5. // 或者CommonJS方式
  6. const Chart = require('chart.js/auto');
复制代码

2.3 直接下载文件

你也可以直接从Chart.js官网（https://www.chartjs.org/）下载最新版本的Chart.js文件，然后在HTML中引入：
  2. <!-- 下载后引入本地文件 -->
  3. <script src="path/to/chart.min.js"></script>
复制代码

3. Chart.js的基本使用方法

3.1 创建基本图表

使用Chart.js创建图表的基本步骤如下：

1. 在HTML中创建一个canvas元素
2. 获取canvas的2D上下文
3. 创建Chart实例，配置数据选项

下面是一个创建柱状图的完整示例：
  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Chart.js 基本柱状图</title>
  8.     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  9.     <style>
  10.         .chart-container {
  11.             width: 800px;
  12.             height: 400px;
  13.             margin: 0 auto;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div class="chart-container">
  19.         <canvas id="myChart"></canvas>
  20.     </div>
  21.    
  22.     <script>
  23.         // 获取canvas元素和2D上下文
  24.         const ctx = document.getElementById('myChart').getContext('2d');
  25.         
  26.         // 创建Chart实例
  27.         const myChart = new Chart(ctx, {
  28.             type: 'bar', // 图表类型
  29.             data: {
  30.                 labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
  31.                 datasets: [{
  32.                     label: '月销售额',
  33.                     data: [12, 19, 3, 5, 2, 3],
  34.                     backgroundColor: [
  35.                         'rgba(255, 99, 132, 0.2)',
  36.                         'rgba(54, 162, 235, 0.2)',
  37.                         'rgba(255, 206, 86, 0.2)',
  38.                         'rgba(75, 192, 192, 0.2)',
  39.                         'rgba(153, 102, 255, 0.2)',
  40.                         'rgba(255, 159, 64, 0.2)'
  41.                     ],
  42.                     borderColor: [
  43.                         'rgba(255, 99, 132, 1)',
  44.                         'rgba(54, 162, 235, 1)',
  45.                         'rgba(255, 206, 86, 1)',
  46.                         'rgba(75, 192, 192, 1)',
  47.                         'rgba(153, 102, 255, 1)',
  48.                         'rgba(255, 159, 64, 1)'
  49.                     ],
  50.                     borderWidth: 1
  51.                 }]
  52.             },
  53.             options: {
  54.                 scales: {
  55.                     y: {
  56.                         beginAtZero: true
  57.                     }
  58.                 }
  59.             }
  60.         });
  61.     </script>
  62. </body>
  63. </html>
复制代码

3.2 图表配置选项

Chart.js提供了丰富的配置选项，可以自定义图表的外观和行为。以下是一些常用的配置选项：
  2. const myChart = new Chart(ctx, {
  3.     type: 'bar',
  4.     data: {
  5.         // 数据配置
  6.     },
  7.     options: {
  8.         // 响应式配置
  9.         responsive: true,
  10.         maintainAspectRatio: false,
  11.         
  12.         // 图表标题
  13.         plugins: {
  14.             title: {
  15.                 display: true,
  16.                 text: '月度销售数据',
  17.                 font: {
  18.                     size: 16
  19.                 }
  20.             },
  21.             // 图例配置
  22.             legend: {
  23.                 position: 'top',
  24.             },
  25.             // 工具提示配置
  26.             tooltip: {
  27.                 enabled: true,
  28.                 mode: 'index',
  29.                 intersect: false,
  30.             }
  31.         },
  32.         
  33.         // 坐标轴配置
  34.         scales: {
  35.             x: {
  36.                 display: true,
  37.                 title: {
  38.                     display: true,
  39.                     text: '月份'
  40.                 }
  41.             },
  42.             y: {
  43.                 display: true,
  44.                 title: {
  45.                     display: true,
  46.                     text: '销售额（万元）'
  47.                 },
  48.                 beginAtZero: true,
  49.                 suggestedMax: 20
  50.             }
  51.         },
  52.         
  53.         // 动画配置
  54.         animation: {
  55.             duration: 1000,
  56.             easing: 'easeOutQuart'
  57.         },
  58.         
  59.         // 交互配置
  60.         interaction: {
  61.             mode: 'nearest',
  62.             axis: 'x',
  63.             intersect: false
  64.         }
  65.     }
  66. });
复制代码

4. 不同类型图表的创建方法

Chart.js支持多种图表类型，下面介绍几种常用图表的创建方法。

4.1 折线图

折线图适合展示数据随时间变化的趋势：
  2. const lineChart = new Chart(ctx, {
  3.     type: 'line',
  4.     data: {
  5.         labels: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
  6.         datasets: [{
  7.             label: '产品A销量',
  8.             data: [65, 59, 80, 81, 56, 55, 40],
  9.             borderColor: 'rgb(75, 192, 192)',
  10.             backgroundColor: 'rgba(75, 192, 192, 0.2)',
  11.             tension: 0.1 // 控制线条的弯曲程度
  12.         }, {
  13.             label: '产品B销量',
  14.             data: [28, 48, 40, 19, 86, 27, 90],
  15.             borderColor: 'rgb(255, 99, 132)',
  16.             backgroundColor: 'rgba(255, 99, 132, 0.2)',
  17.             tension: 0.1
  18.         }]
  19.     },
  20.     options: {
  21.         responsive: true,
  22.         plugins: {
  23.             title: {
  24.                 display: true,
  25.                 text: '产品销量趋势'
  26.             }
  27.         },
  28.         scales: {
  29.             y: {
  30.                 beginAtZero: true
  31.             }
  32.         }
  33.     }
  34. });
复制代码

4.2 饼图

饼图适合展示数据的占比关系：
  2. const pieChart = new Chart(ctx, {
  3.     type: 'pie',
  4.     data: {
  5.         labels: ['红色', '蓝色', '黄色', '绿色', '紫色', '橙色'],
  6.         datasets: [{
  7.             label: '投票数',
  8.             data: [12, 19, 3, 5, 2, 3],
  9.             backgroundColor: [
  10.                 'rgba(255, 99, 132, 0.8)',
  11.                 'rgba(54, 162, 235, 0.8)',
  12.                 'rgba(255, 206, 86, 0.8)',
  13.                 'rgba(75, 192, 192, 0.8)',
  14.                 'rgba(153, 102, 255, 0.8)',
  15.                 'rgba(255, 159, 64, 0.8)'
  16.             ],
  17.             borderColor: [
  18.                 'rgba(255, 99, 132, 1)',
  19.                 'rgba(54, 162, 235, 1)',
  20.                 'rgba(255, 206, 86, 1)',
  21.                 'rgba(75, 192, 192, 1)',
  22.                 'rgba(153, 102, 255, 1)',
  23.                 'rgba(255, 159, 64, 1)'
  24.             ],
  25.             borderWidth: 1
  26.         }]
  27.     },
  28.     options: {
  29.         responsive: true,
  30.         plugins: {
  31.             legend: {
  32.                 position: 'top',
  33.             },
  34.             title: {
  35.                 display: true,
  36.                 text: '颜色偏好调查'
  37.             }
  38.         }
  39.     }
  40. });
复制代码

4.3 雷达图

雷达图适合展示多维度数据的对比：
  2. const radarChart = new Chart(ctx, {
  3.     type: 'radar',
  4.     data: {
  5.         labels: ['速度', '力量', '防守', '技术', '耐力', '敏捷'],
  6.         datasets: [{
  7.             label: '球员A',
  8.             data: [80, 90, 70, 85, 75, 88],
  9.             fill: true,
  10.             backgroundColor: 'rgba(255, 99, 132, 0.2)',
  11.             borderColor: 'rgb(255, 99, 132)',
  12.             pointBackgroundColor: 'rgb(255, 99, 132)',
  13.             pointBorderColor: '#fff',
  14.             pointHoverBackgroundColor: '#fff',
  15.             pointHoverBorderColor: 'rgb(255, 99, 132)'
  16.         }, {
  17.             label: '球员B',
  18.             data: [70, 85, 90, 75, 80, 75],
  19.             fill: true,
  20.             backgroundColor: 'rgba(54, 162, 235, 0.2)',
  21.             borderColor: 'rgb(54, 162, 235)',
  22.             pointBackgroundColor: 'rgb(54, 162, 235)',
  23.             pointBorderColor: '#fff',
  24.             pointHoverBackgroundColor: '#fff',
  25.             pointHoverBorderColor: 'rgb(54, 162, 235)'
  26.         }]
  27.     },
  28.     options: {
  29.         elements: {
  30.             line: {
  31.                 borderWidth: 3
  32.             }
  33.         },
  34.         responsive: true,
  35.         plugins: {
  36.             title: {
  37.                 display: true,
  38.                 text: '球员能力对比'
  39.             }
  40.         },
  41.         scales: {
  42.             r: {
  43.                 angleLines: {
  44.                     display: true
  45.                 },
  46.                 suggestedMin: 0,
  47.                 suggestedMax: 100
  48.             }
  49.         }
  50.     }
  51. });
复制代码

4.4 极坐标图

极坐标图适合展示周期性数据：
  2. const polarAreaChart = new Chart(ctx, {
  3.     type: 'polarArea',
  4.     data: {
  5.         labels: ['红色', '蓝色', '黄色', '绿色', '紫色', '橙色'],
  6.         datasets: [{
  7.             label: '数据集1',
  8.             data: [11, 16, 7, 3, 14, 10],
  9.             backgroundColor: [
  10.                 'rgba(255, 99, 132, 0.5)',
  11.                 'rgba(54, 162, 235, 0.5)',
  12.                 'rgba(255, 206, 86, 0.5)',
  13.                 'rgba(75, 192, 192, 0.5)',
  14.                 'rgba(153, 102, 255, 0.5)',
  15.                 'rgba(255, 159, 64, 0.5)'
  16.             ]
  17.         }]
  18.     },
  19.     options: {
  20.         responsive: true,
  21.         plugins: {
  22.             title: {
  23.                 display: true,
  24.                 text: '极坐标图示例'
  25.             }
  26.         },
  27.         scales: {
  28.             r: {
  29.                 beginAtZero: true
  30.             }
  31.         }
  32.     }
  33. });
复制代码

5. 图表的自定义和美化

5.1 自定义颜色和样式

Chart.js允许你自定义图表的颜色和样式，使其更符合你的设计需求：
  2. const customChart = new Chart(ctx, {
  3.     type: 'bar',
  4.     data: {
  5.         labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
  6.         datasets: [{
  7.             label: '销售数据',
  8.             data: [12, 19, 3, 5, 2, 3],
  9.             // 使用渐变背景色
  10.             backgroundColor: function(context) {
  11.                 const chart = context.chart;
  12.                 const {ctx, chartArea} = chart;
  13.                 if (!chartArea) {
  14.                     // 图表尚未初始化
  15.                     return null;
  16.                 }
  17.                 return getGradient(ctx, chartArea);
  18.             },
  19.             borderColor: 'rgb(75, 192, 192)',
  20.             borderWidth: 2,
  21.             // 自定义边框样式
  22.             borderSkipped: false,
  23.             borderRadius: 5,
  24.             // 悬停时的样式
  25.             hoverBackgroundColor: 'rgba(75, 192, 192, 0.8)',
  26.             hoverBorderColor: 'rgb(75, 192, 192)',
  27.             hoverBorderWidth: 3
  28.         }]
  29.     },
  30.     options: {
  31.         // 其他配置...
  32.     }
  33. });
  35. // 创建渐变背景色的函数
  36. function getGradient(ctx, chartArea) {
  37.     const gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
  38.     gradient.addColorStop(0, 'rgba(75, 192, 192, 0.2)');
  39.     gradient.addColorStop(1, 'rgba(75, 192, 192, 0.8)');
  40.     return gradient;
  41. }
复制代码

5.2 自定义工具提示

你可以自定义工具提示的内容和样式：
  2. const tooltipChart = new Chart(ctx, {
  3.     type: 'line',
  4.     data: {
  5.         // 数据配置...
  6.     },
  7.     options: {
  8.         plugins: {
  9.             tooltip: {
  10.                 enabled: true,
  11.                 // 自定义工具提示的回调函数
  12.                 callbacks: {
  13.                     title: function(tooltipItems) {
  14.                         return tooltipItems[0].label;
  15.                     },
  16.                     label: function(context) {
  17.                         let label = context.dataset.label || '';
  18.                         if (label) {
  19.                             label += ': ';
  20.                         }
  21.                         if (context.parsed.y !== null) {
  22.                             label += context.parsed.y + ' 万元';
  23.                         }
  24.                         return label;
  25.                     },
  26.                     // 在工具提示底部添加额外信息
  27.                     footer: function(tooltipItems) {
  28.                         return '数据来源: 销售部门';
  29.                     }
  30.                 },
  31.                 // 自定义工具提示样式
  32.                 backgroundColor: 'rgba(0, 0, 0, 0.8)',
  33.                 titleColor: '#fff',
  34.                 bodyColor: '#fff',
  35.                 footerColor: '#fff',
  36.                 borderColor: '#ddd',
  37.                 borderWidth: 1,
  38.                 displayColors: true,
  39.                 caretSize: 10,
  40.                 cornerRadius: 4,
  41.                 padding: 10
  42.             }
  43.         }
  44.     }
  45. });
复制代码

5.3 自定义图例

图例也可以进行自定义：
  2. const legendChart = new Chart(ctx, {
  3.     type: 'bar',
  4.     data: {
  5.         // 数据配置...
  6.     },
  7.     options: {
  8.         plugins: {
  9.             legend: {
  10.                 display: true,
  11.                 position: 'top',
  12.                 align: 'center',
  13.                 // 自定义图例标签
  14.                 labels: {
  15.                     color: '#333',
  16.                     font: {
  17.                         size: 14,
  18.                         family: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
  19.                     },
  20.                     padding: 20,
  21.                     // 自定义图例标签的生成方式
  22.                     generateLabels: function(chart) {
  23.                         const data = chart.data;
  24.                         if (data.labels.length && data.datasets.length) {
  25.                             return data.datasets.map(function(dataset, i) {
  26.                                 return {
  27.                                     text: dataset.label,
  28.                                     fillStyle: dataset.backgroundColor,
  29.                                     strokeStyle: dataset.borderColor,
  30.                                     lineWidth: dataset.borderWidth,
  31.                                     hidden: !chart.getDataVisibility(i),
  32.                                     index: i,
  33.                                     // 添加自定义属性
  34.                                     datasetIndex: i
  35.                                 };
  36.                             });
  37.                         }
  38.                         return [];
  39.                     }
  40.                 },
  41.                 // 自定义图例点击事件
  42.                 onClick: function(e, legendItem, legend) {
  43.                     const index = legendItem.datasetIndex;
  44.                     const chart = legend.chart;
  45.                     if (chart.isDatasetVisible(index)) {
  46.                         chart.hide(index);
  47.                         legendItem.hidden = true;
  48.                     } else {
  49.                         chart.show(index);
  50.                         legendItem.hidden = false;
  51.                     }
  52.                 }
  53.             }
  54.         }
  55.     }
  56. });
复制代码

6. 数据可视化的最佳实践

6.1 选择合适的图表类型

不同的数据类型和分析目的需要不同的图表类型：

• 比较数据：柱状图、条形图、折线图
• 显示组成：饼图、环形图、堆叠柱状图
• 显示分布：直方图、箱线图、散点图
• 显示关系：散点图、气泡图、热图
• 显示时间序列：折线图、面积图

例如，如果你想比较不同产品的销售情况，柱状图是一个好选择：
  2. const comparisonChart = new Chart(ctx, {
  3.     type: 'bar',
  4.     data: {
  5.         labels: ['产品A', '产品B', '产品C', '产品D', '产品E'],
  6.         datasets: [{
  7.             label: 'Q1销售额',
  8.             data: [120, 190, 30, 50, 20],
  9.             backgroundColor: 'rgba(54, 162, 235, 0.5)',
  10.             borderColor: 'rgba(54, 162, 235, 1)',
  11.             borderWidth: 1
  12.         }, {
  13.             label: 'Q2销售额',
  14.             data: [150, 210, 45, 60, 30],
  15.             backgroundColor: 'rgba(255, 99, 132, 0.5)',
  16.             borderColor: 'rgba(255, 99, 132, 1)',
  17.             borderWidth: 1
  18.         }]
  19.     },
  20.     options: {
  21.         responsive: true,
  22.         plugins: {
  23.             title: {
  24.                 display: true,
  25.                 text: '产品季度销售对比'
  26.             }
  27.         },
  28.         scales: {
  29.             y: {
  30.                 beginAtZero: true,
  31.                 title: {
  32.                     display: true,
  33.                     text: '销售额（万元）'
  34.                 }
  35.             }
  36.         }
  37.     }
  38. });
复制代码

6.2 数据准备和格式化

良好的数据准备是创建有效图表的关键：
  2. // 示例：从API获取数据并格式化为Chart.js需要的格式
  3. async function fetchAndFormatData() {
  4.     try {
  5.         // 假设从API获取原始数据
  6.         const response = await fetch('https://api.example.com/sales-data');
  7.         const rawData = await response.json();
  8.         
  9.         // 格式化数据
  10.         const labels = rawData.map(item => item.month);
  11.         const salesData = rawData.map(item => item.sales);
  12.         const profitData = rawData.map(item => item.profit);
  13.         
  14.         // 创建图表
  15.         const formattedChart = new Chart(ctx, {
  16.             type: 'line',
  17.             data: {
  18.                 labels: labels,
  19.                 datasets: [{
  20.                     label: '销售额',
  21.                     data: salesData,
  22.                     borderColor: 'rgb(75, 192, 192)',
  23.                     backgroundColor: 'rgba(75, 192, 192, 0.2)',
  24.                     tension: 0.1
  25.                 }, {
  26.                     label: '利润',
  27.                     data: profitData,
  28.                     borderColor: 'rgb(255, 99, 132)',
  29.                     backgroundColor: 'rgba(255, 99, 132, 0.2)',
  30.                     tension: 0.1
  31.                 }]
  32.             },
  33.             options: {
  34.                 responsive: true,
  35.                 plugins: {
  36.                     title: {
  37.                         display: true,
  38.                         text: '月度销售与利润趋势'
  39.                     }
  40.                 },
  41.                 scales: {
  42.                     y: {
  43.                         beginAtZero: true,
  44.                         // 格式化Y轴标签
  45.                         ticks: {
  46.                             callback: function(value) {
  47.                                 return '¥' + value.toLocaleString();
  48.                             }
  49.                         }
  50.                     }
  51.                 }
  52.             }
  53.         });
  54.         
  55.         return formattedChart;
  56.     } catch (error) {
  57.         console.error('获取数据失败:', error);
  58.     }
  59. }
  61. // 调用函数创建图表
  62. fetchAndFormatData();
复制代码

6.3 响应式设计

确保图表在不同设备上都能良好显示：
  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>响应式Chart.js图表</title>
  8.     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  9.     <style>
  10.         body {
  11.             font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  12.             margin: 0;
  13.             padding: 20px;
  14.         }
  15.         
  16.         .chart-container {
  17.             position: relative;
  18.             width: 100%;
  19.             /* 使用媒体查询调整图表容器高度 */
  20.             height: 400px;
  21.         }
  22.         
  23.         @media (max-width: 768px) {
  24.             .chart-container {
  25.                 height: 300px;
  26.             }
  27.         }
  28.         
  29.         @media (max-width: 480px) {
  30.             .chart-container {
  31.                 height: 250px;
  32.             }
  33.         }
  34.         
  35.         .dashboard {
  36.             display: grid;
  37.             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  38.             gap: 20px;
  39.         }
  40.         
  41.         .chart-card {
  42.             background: #fff;
  43.             border-radius: 8px;
  44.             box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  45.             padding: 15px;
  46.         }
  47.     </style>
  48. </head>
  49. <body>
  50.     <h1>销售数据仪表板</h1>
  51.    
  52.     <div class="dashboard">
  53.         <div class="chart-card">
  54.             <h2>月度销售趋势</h2>
  55.             <div class="chart-container">
  56.                 <canvas id="salesChart"></canvas>
  57.             </div>
  58.         </div>
  59.         
  60.         <div class="chart-card">
  61.             <h2>产品销售占比</h2>
  62.             <div class="chart-container">
  63.                 <canvas id="pieChart"></canvas>
  64.             </div>
  65.         </div>
  66.     </div>
  67.    
  68.     <script>
  69.         // 创建响应式图表
  70.         function createResponsiveCharts() {
  71.             // 销售趋势图
  72.             const salesCtx = document.getElementById('salesChart').getContext('2d');
  73.             const salesChart = new Chart(salesCtx, {
  74.                 type: 'line',
  75.                 data: {
  76.                     labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
  77.                     datasets: [{
  78.                         label: '销售额',
  79.                         data: [120, 190, 30, 50, 20, 30],
  80.                         borderColor: 'rgb(75, 192, 192)',
  81.                         backgroundColor: 'rgba(75, 192, 192, 0.2)',
  82.                         tension: 0.1
  83.                     }]
  84.                 },
  85.                 options: {
  86.                     responsive: true,
  87.                     maintainAspectRatio: false,
  88.                     plugins: {
  89.                         legend: {
  90.                             display: true,
  91.                             position: 'top',
  92.                         }
  93.                     },
  94.                     scales: {
  95.                         y: {
  96.                             beginAtZero: true
  97.                         }
  98.                     }
  99.                 }
  100.             });
  101.             
  102.             // 饼图
  103.             const pieCtx = document.getElementById('pieChart').getContext('2d');
  104.             const pieChart = new Chart(pieCtx, {
  105.                 type: 'doughnut',
  106.                 data: {
  107.                     labels: ['产品A', '产品B', '产品C', '产品D'],
  108.                     datasets: [{
  109.                         data: [30, 25, 20, 25],
  110.                         backgroundColor: [
  111.                             'rgba(255, 99, 132, 0.8)',
  112.                             'rgba(54, 162, 235, 0.8)',
  113.                             'rgba(255, 206, 86, 0.8)',
  114.                             'rgba(75, 192, 192, 0.8)'
  115.                         ]
  116.                     }]
  117.                 },
  118.                 options: {
  119.                     responsive: true,
  120.                     maintainAspectRatio: false,
  121.                     plugins: {
  122.                         legend: {
  123.                             position: 'right',
  124.                             // 在小屏幕上将图例移到底部
  125.                             labels: {
  126.                                 boxWidth: 15,
  127.                                 padding: 15
  128.                             }
  129.                         }
  130.                     }
  131.                 }
  132.             });
  133.             
  134.             // 监听窗口大小变化，调整图表
  135.             window.addEventListener('resize', function() {
  136.                 salesChart.resize();
  137.                 pieChart.resize();
  138.             });
  139.         }
  140.         
  141.         // 页面加载完成后创建图表
  142.         window.addEventListener('load', createResponsiveCharts);
  143.     </script>
  144. </body>
  145. </html>
复制代码

7. 提升用户体验的技巧

7.1 添加交互功能

增强图表的交互性可以提升用户体验：
  2. const interactiveChart = new Chart(ctx, {
  3.     type: 'bar',
  4.     data: {
  5.         labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
  6.         datasets: [{
  7.             label: '销售额',
  8.             data: [12, 19, 3, 5, 2, 3],
  9.             backgroundColor: 'rgba(54, 162, 235, 0.5)',
  10.             borderColor: 'rgba(54, 162, 235, 1)',
  11.             borderWidth: 1
  12.         }]
  13.     },
  14.     options: {
  15.         responsive: true,
  16.         plugins: {
  17.             tooltip: {
  18.                 // 启用工具提示
  19.                 enabled: true,
  20.                 // 添加动画效果
  21.                 animation: {
  22.                     duration: 400
  23.                 }
  24.             }
  25.         },
  26.         // 点击事件
  27.         onClick: (event, elements) => {
  28.             if (elements.length > 0) {
  29.                 const index = elements[0].index;
  30.                 const label = interactiveChart.data.labels[index];
  31.                 const value = interactiveChart.data.datasets[0].data[index];
  32.                
  33.                 // 显示详细信息或执行其他操作
  34.                 showDetails(label, value);
  35.             }
  36.         },
  37.         // 悬停效果
  38.         onHover: (event, elements) => {
  39.             event.native.target.style.cursor = elements.length > 0 ? 'pointer' : 'default';
  40.         }
  41.     }
  42. });
  44. // 显示详细信息的函数
  45. function showDetails(label, value) {
  46.     // 创建或更新一个模态框显示详细信息
  47.     const modal = document.getElementById('detailModal') || createModal();
  48.     const content = modal.querySelector('.modal-content');
  49.    
  50.     content.innerHTML = `
  51.         <h2>${label}销售详情</h2>
  52.         <p>销售额: ${value}万元</p>
  53.         <p>同比增长: ${Math.floor(Math.random() * 20 + 1)}%</p>
  54.         <p>环比增长: ${Math.floor(Math.random() * 15 - 5)}%</p>
  55.         <button id="closeModal">关闭</button>
  56.     `;
  57.    
  58.     modal.style.display = 'block';
  59.    
  60.     // 添加关闭按钮事件
  61.     document.getElementById('closeModal').addEventListener('click', () => {
  62.         modal.style.display = 'none';
  63.     });
  64. }
  66. // 创建模态框的函数
  67. function createModal() {
  68.     const modal = document.createElement('div');
  69.     modal.id = 'detailModal';
  70.     modal.style.cssText = `
  71.         display: none;
  72.         position: fixed;
  73.         top: 0;
  74.         left: 0;
  75.         width: 100%;
  76.         height: 100%;
  77.         background-color: rgba(0, 0, 0, 0.5);
  78.         z-index: 1000;
  79.         justify-content: center;
  80.         align-items: center;
  81.     `;
  82.    
  83.     const content = document.createElement('div');
  84.     content.className = 'modal-content';
  85.     content.style.cssText = `
  86.         background-color: white;
  87.         padding: 20px;
  88.         border-radius: 5px;
  89.         max-width: 500px;
  90.         width: 80%;
  91.     `;
  92.    
  93.     modal.appendChild(content);
  94.     document.body.appendChild(modal);
  95.    
  96.     return modal;
  97. }
复制代码

7.2 动态更新数据

实时更新图表数据可以提供更好的用户体验：
  2. // 创建动态更新的图表
  3. const dynamicChart = new Chart(ctx, {
  4.     type: 'line',
  5.     data: {
  6.         labels: [],
  7.         datasets: [{
  8.             label: '实时数据',
  9.             data: [],
  10.             borderColor: 'rgb(75, 192, 192)',
  11.             backgroundColor: 'rgba(75, 192, 192, 0.2)',
  12.             tension: 0.1
  13.         }]
  14.     },
  15.     options: {
  16.         responsive: true,
  17.         scales: {
  18.             x: {
  19.                 display: true
  20.             },
  21.             y: {
  22.                 display: true,
  23.                 beginAtZero: true
  24.             }
  25.         },
  26.         animation: {
  27.             duration: 0 // 禁用动画以获得更好的性能
  28.         }
  29.     }
  30. });
  32. // 添加数据点的函数
  33. function addData() {
  34.     const now = new Date();
  35.     const timeString = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();
  36.     const value = Math.floor(Math.random() * 100);
  37.    
  38.     // 添加新数据点
  39.     dynamicChart.data.labels.push(timeString);
  40.     dynamicChart.data.datasets[0].data.push(value);
  41.    
  42.     // 限制显示的数据点数量
  43.     if (dynamicChart.data.labels.length > 10) {
  44.         dynamicChart.data.labels.shift();
  45.         dynamicChart.data.datasets[0].data.shift();
  46.     }
  47.    
  48.     // 更新图表
  49.     dynamicChart.update();
  50. }
  52. // 定时添加数据
  53. setInterval(addData, 1000);
  55. // 添加控制按钮
  56. document.getElementById('startBtn').addEventListener('click', () => {
  57.     if (!window.updateInterval) {
  58.         window.updateInterval = setInterval(addData, 1000);
  59.     }
  60. });
  62. document.getElementById('stopBtn').addEventListener('click', () => {
  63.     if (window.updateInterval) {
  64.         clearInterval(window.updateInterval);
  65.         window.updateInterval = null;
  66.     }
  67. });
  69. document.getElementById('resetBtn').addEventListener('click', () => {
  70.     dynamicChart.data.labels = [];
  71.     dynamicChart.data.datasets[0].data = [];
  72.     dynamicChart.update();
  73. });
复制代码

7.3 导出图表功能

添加导出功能可以让用户保存图表：
  2. <!DOCTYPE html>
  3. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Chart.js 导出示例</title>
  8.     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  9.     <style>
  10.         .chart-container {
  11.             position: relative;
  12.             width: 800px;
  13.             height: 400px;
  14.             margin: 0 auto;
  15.         }
  16.         
  17.         .controls {
  18.             text-align: center;
  19.             margin: 20px 0;
  20.         }
  21.         
  22.         button {
  23.             padding: 8px 16px;
  24.             margin: 0 5px;
  25.             background-color: #4CAF50;
  26.             color: white;
  27.             border: none;
  28.             border-radius: 4px;
  29.             cursor: pointer;
  30.         }
  31.         
  32.         button:hover {
  33.             background-color: #45a049;
  34.         }
  35.     </style>
  36. </head>
  37. <body>
  38.     <h1 style="text-align: center;">可导出的图表示例</h1>
  39.    
  40.     <div class="controls">
  41.         <button id="exportPNG">导出为PNG</button>
  42.         <button id="exportJPG">导出为JPG</button>
  43.         <button id="downloadData">下载数据</button>
  44.     </div>
  45.    
  46.     <div class="chart-container">
  47.         <canvas id="exportChart"></canvas>
  48.     </div>
  49.    
  50.     <script>
  51.         // 创建图表
  52.         const ctx = document.getElementById('exportChart').getContext('2d');
  53.         const exportChart = new Chart(ctx, {
  54.             type: 'bar',
  55.             data: {
  56.                 labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
  57.                 datasets: [{
  58.                     label: '销售额',
  59.                     data: [12, 19, 3, 5, 2, 3],
  60.                     backgroundColor: 'rgba(54, 162, 235, 0.5)',
  61.                     borderColor: 'rgba(54, 162, 235, 1)',
  62.                     borderWidth: 1
  63.                 }]
  64.             },
  65.             options: {
  66.                 responsive: true,
  67.                 maintainAspectRatio: false,
  68.                 plugins: {
  69.                     title: {
  70.                         display: true,
  71.                         text: '月度销售数据'
  72.                     }
  73.                 }
  74.             }
  75.         });
  76.         
  77.         // 导出为PNG
  78.         document.getElementById('exportPNG').addEventListener('click', () => {
  79.             const url = exportChart.toBase64Image('image/png', 1);
  80.             downloadImage(url, 'chart.png');
  81.         });
  82.         
  83.         // 导出为JPG
  84.         document.getElementById('exportJPG').addEventListener('click', () => {
  85.             const url = exportChart.toBase64Image('image/jpeg', 0.8);
  86.             downloadImage(url, 'chart.jpg');
  87.         });
  88.         
  89.         // 下载图表数据
  90.         document.getElementById('downloadData').addEventListener('click', () => {
  91.             const data = {
  92.                 labels: exportChart.data.labels,
  93.                 datasets: exportChart.data.datasets.map(dataset => ({
  94.                     label: dataset.label,
  95.                     data: dataset.data
  96.                 }))
  97.             };
  98.             
  99.             const json = JSON.stringify(data, null, 2);
  100.             const blob = new Blob([json], { type: 'application/json' });
  101.             const url = URL.createObjectURL(blob);
  102.             
  103.             const a = document.createElement('a');
  104.             a.href = url;
  105.             a.download = 'chart-data.json';
  106.             document.body.appendChild(a);
  107.             a.click();
  108.             document.body.removeChild(a);
  109.             URL.revokeObjectURL(url);
  110.         });
  111.         
  112.         // 下载图片的辅助函数
  113.         function downloadImage(url, filename) {
  114.             const a = document.createElement('a');
  115.             a.href = url;
  116.             a.download = filename;
  117.             document.body.appendChild(a);
  118.             a.click();
  119.             document.body.removeChild(a);
  120.         }
  121.     </script>
  122. </body>
  123. </html>
复制代码

8. 常见问题及解决方案

8.1 图表不显示或显示异常

问题：图表不显示或显示异常。

可能原因：

1. Canvas元素未正确创建或获取
2. Chart.js库未正确加载
3. 数据格式不正确
4. 容器尺寸问题

解决方案：
  2. // 1. 确保Canvas元素正确创建
  3. // 在HTML中
  4. <canvas id="myChart"></canvas>
  6. // 在JavaScript中
  7. const canvas = document.getElementById('myChart');
  8. if (!canvas) {
  9.     console.error('Canvas元素未找到');
  10.     return;
  11. }
  13. // 2. 确保Chart.js库已加载
  14. if (typeof Chart === 'undefined') {
  15.     console.error('Chart.js库未加载');
  16.     // 动态加载Chart.js
  17.     const script = document.createElement('script');
  18.     script.src = 'https://cdn.jsdelivr.net/npm/chart.js';
  19.     script.onload = function() {
  20.         createChart();
  21.     };
  22.     document.head.appendChild(script);
  23. } else {
  24.     createChart();
  25. }
  27. // 3. 确保数据格式正确
  28. function createChart() {
  29.     const ctx = canvas.getContext('2d');
  30.    
  31.     // 检查数据格式
  32.     const data = {
  33.         labels: ['一月', '二月', '三月'],
  34.         datasets: [{
  35.             label: '数据集',
  36.             data: [10, 20, 30]
  37.         }]
  38.     };
  39.    
  40.     // 验证数据
  41.     if (!data.labels || !data.datasets || !Array.isArray(data.labels) || !Array.isArray(data.datasets)) {
  42.         console.error('数据格式不正确');
  43.         return;
  44.     }
  45.    
  46.     // 4. 确保容器有尺寸
  47.     canvas.width = canvas.offsetWidth;
  48.     canvas.height = canvas.offsetHeight;
  49.    
  50.     // 创建图表
  51.     new Chart(ctx, {
  52.         type: 'bar',
  53.         data: data,
  54.         options: {
  55.             responsive: true,
  56.             maintainAspectRatio: false
  57.         }
  58.     });
  59. }
复制代码

8.2 图表响应式问题

问题：图表在窗口大小变化时不能正确调整大小。

解决方案：
  2. // 创建图表时设置响应式选项
  3. const responsiveChart = new Chart(ctx, {
  4.     type: 'bar',
  5.     data: {
  6.         // 数据...
  7.     },
  8.     options: {
  9.         responsive: true, // 启用响应式
  10.         maintainAspectRatio: false, // 不保持纵横比
  11.         // 设置容器大小
  12.         width: '100%',
  13.         height: '100%'
  14.     }
  15. });
  17. // 监听窗口大小变化
  18. window.addEventListener('resize', function() {
  19.     responsiveChart.resize();
  20. });
  22. // 或者使用ResizeObserver API（现代浏览器）
  23. const resizeObserver = new ResizeObserver(entries => {
  24.     for (let entry of entries) {
  25.         if (entry.target === canvas.parentElement) {
  26.             responsiveChart.resize();
  27.         }
  28.     }
  29. });
  31. // 开始观察容器元素
  32. resizeObserver.observe(canvas.parentElement);
  34. // 当不再需要时停止观察
  35. // resizeObserver.disconnect();
复制代码

8.3 性能问题

问题：图表渲染缓慢或页面卡顿。

解决方案：
  2. // 1. 减少数据点数量
  3. // 如果有大量数据点，考虑采样或聚合
  4. function downsampleData(data, maxPoints) {
  5.     if (data.length <= maxPoints) return data;
  6.    
  7.     const step = Math.floor(data.length / maxPoints);
  8.     const result = [];
  9.    
  10.     for (let i = 0; i < data.length; i += step) {
  11.         result.push(data[i]);
  12.     }
  13.    
  14.     return result;
  15. }
  17. // 使用采样后的数据
  18. const originalData = [/* 大量数据点 */];
  19. const sampledData = downsampleData(originalData, 100);
  21. // 2. 禁用动画
  22. const performanceChart = new Chart(ctx, {
  23.     type: 'line',
  24.     data: {
  25.         labels: downsampleData(labels, 100),
  26.         datasets: [{
  27.             label: '数据集',
  28.             data: sampledData,
  29.             // 其他配置...
  30.         }]
  31.     },
  32.     options: {
  33.         animation: {
  34.             duration: 0 // 禁用动画
  35.         },
  36.         // 其他配置...
  37.     }
  38. });
  40. // 3. 使用Web Worker处理数据
  41. // 主线程代码
  42. const worker = new Worker('data-processor.js');
  44. worker.postMessage({
  45.     action: 'processData',
  46.     data: largeDataSet
  47. });
  49. worker.onmessage = function(e) {
  50.     if (e.data.action === 'dataProcessed') {
  51.         // 使用处理后的数据更新图表
  52.         performanceChart.data.labels = e.data.labels;
  53.         performanceChart.data.datasets[0].data = e.data.values;
  54.         performanceChart.update();
  55.     }
  56. };
  58. // data-processor.js (Web Worker)
  59. self.onmessage = function(e) {
  60.     if (e.data.action === 'processData') {
  61.         const data = e.data.data;
  62.         // 执行复杂的数据处理
  63.         const processedData = processData(data);
  64.         
  65.         self.postMessage({
  66.             action: 'dataProcessed',
  67.             labels: processedData.labels,
  68.             values: processedData.values
  69.         });
  70.     }
  71. };
  73. function processData(data) {
  74.     // 数据处理逻辑
  75.     // ...
  76.     return { labels, values };
  77. }
复制代码

8.4 图表更新问题

问题：动态更新图表时出现问题。

解决方案：
  2. // 创建图表
  3. const updateChart = new Chart(ctx, {
  4.     type: 'line',
  5.     data: {
  6.         labels: ['一月', '二月', '三月'],
  7.         datasets: [{
  8.             label: '数据集',
  9.             data: [10, 20, 30],
  10.             fill: false
  11.         }]
  12.     },
  13.     options: {
  14.         responsive: true
  15.     }
  16. });
  18. // 正确更新图表数据的方法
  19. function updateChartData() {
  20.     // 获取新数据
  21.     const newData = getNewData();
  22.    
  23.     // 更新数据
  24.     updateChart.data.labels = newData.labels;
  25.     updateChart.data.datasets[0].data = newData.values;
  26.    
  27.     // 更新图表
  28.     updateChart.update();
  29. }
  31. // 添加新数据点
  32. function addDataPoint() {
  33.     // 添加新标签
  34.     updateChart.data.labels.push('新月份');
  35.    
  36.     // 添加新数据点
  37.     updateChart.data.datasets.forEach((dataset) => {
  38.         dataset.data.push(Math.floor(Math.random() * 100));
  39.     });
  40.    
  41.     // 限制数据点数量
  42.     if (updateChart.data.labels.length > 10) {
  43.         updateChart.data.labels.shift();
  44.         updateChart.data.datasets.forEach((dataset) => {
  45.             dataset.data.shift();
  46.         });
  47.     }
  48.    
  49.     // 更新图表
  50.     updateChart.update();
  51. }
  53. // 替换整个数据集
  54. function replaceDataset() {
  55.     const newDataset = {
  56.         label: '新数据集',
  57.         data: [65, 59, 80, 81, 56, 55, 40],
  58.         borderColor: 'rgb(255, 99, 132)',
  59.         backgroundColor: 'rgba(255, 99, 132, 0.2)',
  60.         fill: false
  61.     };
  62.    
  63.     // 替换数据集
  64.     updateChart.data.datasets[0] = newDataset;
  65.    
  66.     // 更新图表
  67.     updateChart.update();
  68. }
  70. // 添加新数据集
  71. function addDataset() {
  72.     const newDataset = {
  73.         label: '额外数据集',
  74.         data: [28, 48, 40, 19, 86, 27, 90],
  75.         borderColor: 'rgb(75, 192, 192)',
  76.         backgroundColor: 'rgba(75, 192, 192, 0.2)',
  77.         fill: false
  78.     };
  79.    
  80.     // 添加新数据集
  81.     updateChart.data.datasets.push(newDataset);
  82.    
  83.     // 更新图表
  84.     updateChart.update();
  85. }
  87. // 删除数据集
  88. function removeDataset(index) {
  89.     if (index >= 0 && index < updateChart.data.datasets.length) {
  90.         updateChart.data.datasets.splice(index, 1);
  91.         updateChart.update();
  92.     }
  93. }
复制代码

8.5 图表样式问题

问题：图表样式不符合预期。

解决方案：
  2. // 自定义图表样式
  3. const styledChart = new Chart(ctx, {
  4.     type: 'bar',
  5.     data: {
  6.         labels: ['一月', '二月', '三月', '四月', '五月', '六月'],
  7.         datasets: [{
  8.             label: '数据集1',
  9.             data: [12, 19, 3, 5, 2, 3],
  10.             backgroundColor: 'rgba(255, 99, 132, 0.5)',
  11.             borderColor: 'rgba(255, 99, 132, 1)',
  12.             borderWidth: 1
  13.         }, {
  14.             label: '数据集2',
  15.             data: [7, 11, 5, 8, 3, 7],
  16.             backgroundColor: 'rgba(54, 162, 235, 0.5)',
  17.             borderColor: 'rgba(54, 162, 235, 1)',
  18.             borderWidth: 1
  19.         }]
  20.     },
  21.     options: {
  22.         // 全局样式
  23.         plugins: {
  24.             legend: {
  25.                 labels: {
  26.                     font: {
  27.                         size: 14,
  28.                         family: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
  29.                     },
  30.                     color: '#333'
  31.                 }
  32.             },
  33.             title: {
  34.                 display: true,
  35.                 text: '自定义样式图表',
  36.                 font: {
  37.                     size: 18,
  38.                     weight: 'bold'
  39.                 },
  40.                 color: '#333',
  41.                 padding: 20
  42.             }
  43.         },
  44.         // 坐标轴样式
  45.         scales: {
  46.             x: {
  47.                 grid: {
  48.                     display: false // 隐藏X轴网格线
  49.                 },
  50.                 ticks: {
  51.                     font: {
  52.                         size: 12
  53.                     },
  54.                     color: '#666'
  55.                 }
  56.             },
  57.             y: {
  58.                 grid: {
  59.                     color: 'rgba(0, 0, 0, 0.05)' // 自定义Y轴网格线颜色
  60.                 },
  61.                 ticks: {
  62.                     font: {
  63.                         size: 12
  64.                     },
  65.                     color: '#666',
  66.                     // 格式化Y轴标签
  67.                     callback: function(value) {
  68.                         return '¥' + value;
  69.                     }
  70.                 }
  71.             }
  72.         },
  73.         // 布局样式
  74.         layout: {
  75.             padding: {
  76.                 left: 10,
  77.                 right: 10,
  78.                 top: 0,
  79.                 bottom: 10
  80.             }
  81.         },
  82.         // 元素样式
  83.         elements: {
  84.             bar: {
  85.                 borderRadius: 5, // 圆角
  86.                 borderWidth: 2
  87.             },
  88.             point: {
  89.                 radius: 5,
  90.                 hoverRadius: 7
  91.             }
  92.         }
  93.     }
  94. });
  96. // 动态更改样式
  97. function changeChartStyle() {
  98.     // 更新数据集颜色
  99.     styledChart.data.datasets.forEach((dataset, i) => {
  100.         const hue = (i * 60) % 360;
  101.         dataset.backgroundColor = `hsla(${hue}, 70%, 50%, 0.5)`;
  102.         dataset.borderColor = `hsla(${hue}, 70%, 50%, 1)`;
  103.     });
  104.    
  105.     // 更新图表
  106.     styledChart.update();
  107. }
复制代码

总结

Chart.js是一个功能强大、灵活且易于使用的JavaScript图表库，可以帮助开发者快速创建各种类型的交互式图表，实现数据可视化，提升用户体验。通过本教程，我们学习了：

1. Chart.js的下载和安装方法
2. 基本图表的创建和配置
3. 不同类型图表的实现方法
4. 图表的自定义和美化技巧
5. 数据可视化的最佳实践
6. 提升用户体验的交互功能
7. 常见问题的解决方案

掌握Chart.js的使用，可以让你的网页数据展示更加直观、美观和交互性强，从而提升整体用户体验。希望本教程能帮助你快速上手Chart.js，并在实际项目中灵活应用。
浏览器
「七転び八起き（ななころびやおき）」
回复

使用道具 举报

返回列表 发新帖
您需要登录后才可以回帖 登录 | 立即注册
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

关闭

站长推荐上一条 /1 下一条

友情链接

keba
磕巴白菜
别管 别听 就是玩
二次元论坛
二次元论坛
按下F逃离世界！
友链交换
友链交换
友链为随机排序，不代表本论坛观点
Telegram

Telegram

Discord

Discord

Tencent QQ

Tencent QQ

手机版|联系我们|小黑屋|TG频道|RSS |网站地图

Powered by Pixtech

© 2025-2026 Pixtech Team.

>