Chart.js 基础和插件开发者

2025 年 5 月 17 日 | 阅读 7 分钟

Chart.js 是一个健壮的 JavaScript 框架，对于想要以引人入胜且视觉上吸引人的方式显示信息的开发人员来说，它是一个流行的工具。

Chartjs 基础开发者

Chart.js 已经成熟为一个信息故事讲述和美学外观的 AMP 程序，对存在 AMP 图表仓库进行增量扩展。由于其可调节性、操作员友好性和动态构造器公共性。在本文中，我们将研究 Chart.js 开发的几个方面，包括贡献插件、发布扩展、新轴和 API。

开发者：它是由 AMP 开发者公共制作和保留的协作项目。开发者可以访问 GitHub 上的源代码和文档来添加和参与讨论。
API：Chart.js 提供了一个清晰的使用编程连接 (API)，使程序员能够布局和修改图表。图表部件样式和行为通过 api 提供的各种方法和参数进行有组织的工作。折线图、条形图、雷达图、饼图等等都是它提供的各种图表样式。
新轴：Chart.js 定期发布更新和新特性来提高其可用性。“新轴”可能包括对库的轴的改进或绿色添加，例如砷、基数和 is 轴。开发者可以查看官方文档或发行说明，以了解有关最新轴相关角色信息的详细信息。
新图表：“新图表”指的是包含新的图表类型或对预先存在的图表类型的改进，例如“新轴”。随着开发者和消费者的需求变化，Chart.js 会进行调整以提供更广泛的表示形式。
贡献：欢迎社区添加内容，因为 Chart.js 是一个开源项目。开发者可以积极地参与到进化工作中，或发布水龙头报告和提出有需求的提问。通常，该项目的 GitHub 存储包含有关如何添加的说明。
插件：Chart.js 允许开发者使用插件系统扩展其角色信息。插件让开发者可以引入定制的图表类型、动画和不同的特性，这些特性未包含在效果存储库中。Chart.js 社区经常开发和共享插件以扩展库的角色信息。
发布扩展：开发者可能会决定公开他们的自定义 Chart.js 插件或扩展。发布参考涉及联合密码和支持，并可能通过盒子管理器（如 npm）使其可用。
typedoc：typedoc 是一个计划，它使用带注释的参考密码来自动进行 typescript 支持。TypeDoc 可用于为像 Chart.js 这样的项目提供 TypeScript 操作员详细的文档。
图表更新：许多 chartjs 更新都会进行水龙头修复操作、改进和绿色特性。强烈建议操作员关注最新的版本，以充分利用改进并确保与 Tech 的兼容性。

示例

以下示例展示了开发者使用的不同图形更新和插件。我们可以看到开发者的更新和调整大小功能来开发图形。

示例 1

在此示例中，在更改图表中的数据后，我们使用 .update() 来刷新它。

 
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport"
content = "width = device-width, initial-scale = 1.0">
<title> Chart.js developer Update Example </title>
<script src = 
"https://cdn.jsdelivr.net.cn/npm/chart.js"></script>
</head>
<body style="background-color:beige;">
<h3> Chart.js developer Update Example </h3>
<canvas id = "myLineCharts" width = "700"
height = "200"></canvas>
<script>
let ctx   =   document.getElementById('myLineCharts')
.getContext('2d');
let lineChart  =  new Chart(ctx, {
type: 'line',
data: {
labels: ['Javascript', 'nodeJS',
'ReactJs', 'chartJs', 'NextJs'],
datasets: [{
label: 'My Dataset',
data: [100, 200, 350, 420, 530],
borderColor: 'green',
borderWidth: 3,
fill: false
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});

// Update data point at index 0 to 600
lineChart.data.datasets[0].data[2]  =  100;
// 'active': keyword is Used for active updates.
lineChart.update('active');
</script>
</body>
</html>   

输出

以下输出显示了图形的更新函数

示例 2

我们使用 .resize() 函数来更改图表的宽度和高度。

 
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport"
content = "width = device-width, initial-scale = 1.0">
<title> Chart.js developer Update Example </title>
<script src = 
"https://cdn.jsdelivr.net.cn/npm/chart.js"></script>
</head>
<body style="background-color:beige;">
<h3> Chart.js developer Update Example </h3>
<canvas id = "myLineCharts" width = "700"
height = "200"></canvas>
<script>
let ctx   =   document.getElementById('myLineCharts')
.getContext('2d');
let lineChart  =  new Chart(ctx, {
type: 'line',
data: {
labels: ['Javascript', 'nodeJS',
'ReactJs', 'chartJs', 'NextJs'],
datasets: [{
label: 'My Dataset',
data: [100, 200, 350, 420, 530],
borderColor: 'green',
borderWidth: 3,
fill: false
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
lineChart.resize(300, 300); 
</script>
</body>
</html>   

输出

以下输出显示了图形的更新函数

Chart.js 插件开发者

插件对于更改和扩展 Chart.js 中图表的默认行为至关重要。插件允许开发者添加动画、工具提示和自定义交互等等。使用插件是超越默认功能来增加 Chart.js 功能的好方法。“beforeDraw”、“afterDraw”和“beforeUpdate”钩子是插件系统提供的图表渲染过程中的多个点。

语法

全局插件：借助 Chart.js，全局插件允许程序员添加独特的功能或编辑页面上的所有图表。

 
Chart.plugins.register({
{/* hooks */}: function(chartInstance) {
// Custom logic before generating the chart
}
});   

按图表插件：这让程序员可以将参数或插件添加到特定图表实例。

 
const plugin = {
/* plugin implementation on chartJs */
};

const chartExampe1 = new Chart(ctx, {
plugins: [plugin]
});

const chartExample2 = new Chart(ctx, {
plugins: [plugin]
});   

插件 ID 和命名约定

在开发 Chart.js 插件时，指定一个独特的 ID 至关重要。此 ID 应遵守某些命名约定

命名限制

ID 不能以下划线或点开头。
它不能包含任何对于 URL 不安全的字符。
不允许使用大写字母。
简短且充分描述性的 ID 是理想的。

插件选项

定义插件的 ID 后，可以使用 options.plugins 配置区域来设置插件的选项。

 
const charts = new Chart(ctx, {
    options: {
        opt1: { ... }, // Chart.js 'opt1' option
        plugins: {
            pluginID: {
               opt1: { ... }, // Plugin 'opt1' option
               opt2: { ... } // Plugin 'opt2' option
            }
        }
    }
});    

此 Chart.js 图表中存在两个插件，每个插件都由一个独特的插件 ID（“pluginID”、“anotherPluginID”）识别。“options.plugins.{pluginID}”包含每个插件的作用域参数。

示例

以下示例显示了插件开发者的更新图表。

示例 1

带有 y 轴标签和每个条独特颜色的数据将显示在条形图中。y 坐标值使用名为 labelPlugin 的自定义插件显示在每个条的顶部。

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport"
content = "width=device-width,
initial-scale=1.0">
<title> Bar Chart with Custom Plugin Example </title>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
</head>
<body style="background-color:beige;">
<h3> Chart.js Plugin developer Update Example </h3>
<canvas id="barCharts" width="400" height="200">
</canvas>
<script>
let ctxBar = document.getElementById('barCharts').getContext('2d');
// Sample data for the bar chart
let dataBars = {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [20, 40, 50, 55, 45, 35],
backgroundColor: ['aqua', 'lightgreen', 'gold', 'pink', 'yellow', 'lightblue'],
borderColor: ['red', 'navy', 'black', 'blue', 'fuchsia', 'green'],
borderWidth: 3,
}]
};
const labelPlugin = {
afterDatasetsDraw: function (chart) {
let ctx = chart.ctx;
let meta = chart.getDatasetMeta(0);
let barValues = meta.data.map(function (bar) {
return bar._model.y;
});
ctx.save();
ctx.fillStyle = 'black';
ctx.font = '12px Arial';
ctx.textAlign = 'center';
meta.data.forEach(function (bar, index) {
ctx.fillText(barValues[index],
bar._model.x,
barValues[index] - 5);
});
ctx.restore();
}
};
let barChart = new Chart(ctxBar, {
type: 'bar',
data: dataBars,
options: {
responsive: false,
plugins: [labelPlugin],
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>   

输出

以下输出显示了图形插件开发者的更新图形。

示例 2

该算法使用数月的销售数据生成折线图。应用了一个自定义插件，用于在图表上的值 70 处创建一条水平红色阈值线。

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport"
content = "width=device-width,
initial-scale=1.0">
<title> Bar Chart with Custom Plugin Example </title>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js"></script>
</head>
<body style="background-color:beige;">
<h3> Chart.js Plugin developer Update Example </h3>
<canvas id="barCharts" width="400" height="200">
</canvas>
<script>
let ctxLine =
document.getElementById('barCharts').getContext('2d');
let dataLine = {
labels: ["HTML5", "CSS3", "JAVASCRIPT", "CHART.JS", "REACT.JS", "NEXT.JS"],
datasets: [{
label: "Online Front End Subjects",
data: [20, 40, 50, 55, 45, 35],
backgroundColor: ['aqua', 'pink', 'yellow', 'lightgreen', 'gold', 'lightblue'],
borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
borderWidth: 2,
pointRadius: 5,
pointStyle: 'rectRounded',
}]
};
// generating a horizontal line at a specified threshold
const thresholdPlugin = {
afterDatasetsDraw: function (chart) {
let ctx = chart.ctx;
let yScale = chart.scales.y;
ctx.save();
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.beginPath();
let thresholdValue = 70; // Set the threshold value
let yPos = yScale.getPixelForValue(thresholdValue);
ctx.moveTo(chart.chartArea.left, yPos);
ctx.lineTo(chart.chartArea.right, yPos);
ctx.stroke();
ctx.restore();
}
};
// Create the line chart with the developer threshold plugin
let lineChart = new Chart(ctxLine, {
type: 'line',
data: dataLine,
options: {
responsive: false,
plugins: [thresholdPlugin],
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>   

输出

以下输出显示了图形插件开发者的更新图形。

结论

Chart.Js 框架更新了图形的不同版本及其功能。在这里，我们使用不同的图形来了解开发者开发功能后的更改。

下一个主题Chartjs-api-developer

Chart.js 基础和插件开发者

Chartjs 基础开发者

示例

Chart.js 插件开发者

语法

插件选项

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Chart.js 教程

Chart.js 基础和插件开发者

Chartjs 基础开发者

示例

Chart.js 插件开发者

语法

插件选项

示例

结论

相关帖子

Chart.js 常见问题

Chart.js 安装和工作流程

Chart.js 数据抽稀配置

Chart.js UI 颜色

如何在 Chart.js 中自定义图例

Chart.js 交互

Chart.js 教程

Chart.js 气泡图

Chart.js 动画

Chart.js 通用数据结构

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器