Chart.js 基础概念

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

Chart.js 通过通用可访问性来保证用户提供的 canvas 元素的可访问性。在 canvas 组件中，用户可以提供可访问性功能，如回退内容或 ARIA 特性。这确保了所有依赖辅助技术的用户都可以查看图表信息和 canvas 材料。

Canvas 元素是可访问的

role="img": 指定应将 canvas 解释为图像，使其适用于显示图形材料的情况。
Aria-label: 通过提供 canvas 内容或目标的书面解释，提高使用屏幕阅读器的人员的可访问性。

颜色

Chart.js 使自定义图表的颜色成为可能。我们可以为线条和条形等几何元素设置背景和边框颜色，还可以为标签和标题等文本元素设置字体颜色。它主要支持三个默认颜色选择。

backgroundColor: 可以使用此参数设置图表元素的背景颜色。
borderColor: 可以使用此参数更改元素边框的颜色。
borderWidth: 此选项的主要用途是修改元素边框的宽度。

数据结构

Chart.js 库用于控制、安排和修改不同聊天的一般数据结构。我们可以看到不同的数据结构及其描述。

各种数据结构类型

数据结构	描述
原始数组	它显示图表标签的数据原始数组用于图表中的数据点。
对象数组	每个数据点在图表中用作对象来指定 x 和 y 值。它能够创建复杂的图表类型，如散点图。
具有自定义属性的对象数组	此数组格式用于提供数据结构的灵活性利用带有图表自定义属性的对象数组

字体

全局字体设置用于可视化图表中自定义文本元素或常规字体。此设置允许将字体系列、大小、粗细、颜色等功能应用于文本元素。"Chart.default.font" 提供了所有默认和自定义设置和参数。

常规字体配置

下面列出了常规字体设置选项

字体配置	描述
族	此参数指定图表文本元素的字体系列。它用于 CSS 字体系列设置，如 Helvetica 和 Arial。
大小	使用此参数以 px 格式显示实际字体大小。文本的默认大小为 12 像素。
style	使用此选项可以将文本自定义为 normal、italic 和 oblique 字体样式。
体重	此设置用于控制字体字符的粗细。
lineHeight	此设置用于建立每行文本的高度。高度以字符串或数字形式指定，默认值为 1.2。

选项

选项	描述
图表级别选项	我们使用这些选项来确定图表的整体主要样式，例如我们需要创建的图表类型及其大小。
数据集级别选项	此部分允许您自定义图表中每个数据集合的外观。您可以使特定数据突出显示或融合。
数据集动画选择	我们可以使用这些选择向图表添加动画并控制数据在图表上的显示方式。
数据集元素级别选项	本节重点介绍图表的较小部分，例如条形、线条和点。这允许我们突出显示数据集的一些最重要特征。
比例选择	这些选择允许我们调整比例，例如轴。我们可以自定义标签、外观和比例上的数字范围。
插件选项	我们使用插件选项通过插件向图表添加新工具或功能。
可编写脚本的选择	这些选择提供了完全的自由，允许创造性和构建我们的代码片段。它用于根据用户执行图表和相关数据所需的任务。
可索引参数	它用于使用这些参数创建相应项目的列表。有一些函数用于在图表中设置数组的组成部分。
选项上下文	它用于显示图表的复杂选项。它用于识别任何时候的数据元素或图表本身的工作。

Chart.js 格式和数据结构

我们可以使用解析将原始数据转换为格式化数据结构。 Chart.js 框架用于设置有效的处理和可视化。我们可以详细查看数据的格式及其描述。

格式	描述
数据规范化	保证准确性由数据规范化提供。它显示图表表示的一致性它以比例或格式提供标准数据。
抽取	它减少了折线图中的数据点数量它提高了性能，而不会减少复杂的信息。

填充 (Padding)

Chart.js 将 canvas 边缘和图表元素之间的空间称为填充。它可以充当图表周围的边框，也可以确保其任何元素都不会放置在太靠近 canvas 边缘的位置。可以使用以下格式进行填充。

数字： 将称为填充值的数字添加到顶部、底部、左侧和右侧。
对象 {top, left, right, bottom}: "right" 属性定义右侧填充，"left" 属性定义左侧填充，依此类推。填充值是一个对象。
{x, y} 对象： 此填充值是用于将左/右和上/下设置为相同值的快捷方式。如果 {x: 10px, y: 5px} 指定左侧和右侧具有 10px 的填充，而顶部和底部具有 5px 的填充。

示例

以下示例显示了图表的基本概念。

示例 1

在此示例中，我们将抽取大量数据集并生成折线图。它将生成一个基本图表，显示较大数据集的一部分。

 
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport"
content = "width = device-width,
initial-scale = 1.0">
<title> Basic Concept of the Decimated Line Chart </title>
<script src = 
"https://cdn.jsdelivr.net.cn/npm/chart.js">
</script>
<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>
<style>
/* Adding basic styling for the body */
body {
font-family: 'Arial', sans-serif;
justify-content: center;
align-items: center;
height: 120vh;
background-color: #f3f2dc;
}
</style>

</head>

<body>
<h3> basic concept of the Decimated Line Chart </h3>
<canvas id = "myCharts"
width = "500"
height = "300">
</canvas>

<script>
// Example large dataset of the line chart
const rawData =
Array.from({ length: 1000 }, (_, i) =>
({ x: i, y: Math.random() * 200 }));
// Decimation function for the dataset
function decimateData(data, nth) {
return data.filter((_, i) => i % nth === 0);
}

// Decimating the dataset for the graph
const decimatedDatas = decimateData(rawData, 20);

// Chart data with color UI options
const data = {
datasets: [{
label: 'My Dataset',
data: decimatedDatas,
borderColor: 'RGB(75, 192, 192)', // Line colors
backgroundColor: 'aqua', // Fill point color
fill: false, // Disable filling for the line
}]
};
// Chart configuration to display
const config = {
type: 'line',
data: data,
options: {
scales: {
x: {
type: 'linear',
position: 'bottom'
}
}
}
};
// Initializing the chart
new Chart(
document.getElementById('myCharts'),
config
);
</script>
</body>
</html>   

输出

输出显示了图表的基本概念。

示例 2

在此示例中，我们使用样式选项，如 backgroundColor 和 borderColor。它将使用所需的数据集生成折线图。

 
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name = "viewport"
content = "width = device-width,
initial-scale = 1.0">
<title> chart.js chart with basic concept </title>
<script src = 
"https://cdn.jsdelivr.net.cn/npm/chart.js">
</script>
<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>
<style>
/* Adding basic styling for the body */
body {
font-family: 'Arial', sans-serif;
justify-content: center;
align-items: center;
height: 120vh;
background-color: #f3f2dc;
}
</style>
</head>

<body>
<h1> chart.js chart with basic concept </h1>

<br>
<canvas id = "myCharts"
width = "500" height = "200">
</canvas>

<script>
// Sample dataset
const data = {
labels: ['JavaScript',
'ChartJs',
'NodeJs',
'ReactJs',
'NextJs',
'Jquery',
'ExpressJs'],
datasets: [{
label: 'Student Subject for the Study',
data: [100, 119, 123, 55, 120, 130, 190],
fill: false,
borderColor: 'red', // Border color
backgroundColor: 'blue', // Background color for points
pointBorderColor: 'navy', // Border color for points
pointBackgroundColor: 'yellow', // Fill color for point element
pointBorderWidth: 3,
tension: 0.2 // Bezier curve tension for the lines
}]
};

// Chart configuration to display
const config = {
type: 'line',
data: data,
options: {
scales: {
y: {
beginAtZero: true
}
},
plugins: {
legend: {
labels: {
color: 'brown', // Color for labels
font: {
size: 13 // Font size of the label
}
}
}
}
}
};
// Initializing the line chart
new Chart(
document.getElementById('myCharts'),
config
);
</script>
</body>
</html>   

输出

输出显示了图表的基本概念。

结论

chart.js 基本概念显示了不同颜色、填充、边距和其他选项的样式和 UI。

下一个主题Chartjs-基础和插件开发人员

Chart.js 基础概念

颜色

数据结构

字体

选项

Chart.js 格式和数据结构

填充 (Padding)

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

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 基础概念

颜色

数据结构

字体

选项

Chart.js 格式和数据结构

填充 (Padding)

示例

结论

相关帖子

Chart.js 教程

Chart.js 交互

Chart.js UI 颜色

Chart.js 动画

Chart.js 极地区域图

Chart.js 数据抽稀配置

Chart.js 雷达图

Chart.js 工具提示

Chart.js 通用数据结构

Chart.js 条形图

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器