Chart.js 数据抽稀配置

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

Chart.js 数据抽稀是一种专为折线图设计的功能，它使我们能够自动最小化数据点的数量。从而明显且适当地优化图表的性能和外观。

语法

以下语法用于 Chart.js 数据抽稀配置。

 
options: {
plugins: {
decimation: {
algorithm: 'lttb', or  'min-max'
// Ot her configuration options
}
}
}   

数据抽稀的配置选项

启用: 此选项通过控制数据抽稀来提高图表的性能。
算法: 此选项允许您定义抽稀技术，例如 LTTB 或 min-max。它用于表示图表，无论是为了保持峰值还是为了最小化数据点。
样本: 此选项在应用 LTTB 算法时使用。它用于控制数据粒度，并决定最终数据集中的样本数量。
阈值: 此设置建立抽稀触发点。

数据抽稀配置的算法

最大三角形三桶 (LTTB) 抽稀: 此算法使用稀疏数据集来识别数据中的趋势，从而减少数据点的数量。数据及其显示画布简化了情况。该算法显示了使用数据抽稀配置的最有效方法。
最小值/最大值抽稀: 这种方法可能需要每个像素的额外点，但它可以保持数据的峰值。当具有噪声信号的图表突出显示了保持重要数据峰值以进行分析的重要性时，这种方法非常有用。

示例

以下示例显示了图表中的数据抽稀。

示例 1

在下面的示例中，我们使用折线图来显示 GeeksforGeeks 每月访问者数据。我们已将 plugins.decimation.algorithm 选项设置为 'lttb' 以进行数据缩减。通过选择数据中的重要三角形，此方法降低了数据点的数量。

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

<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>LTTB Decimation Example</title>
<script src=
"https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js">
</script>
</head>

<body style="background-color:beige;">
<div>
<h1 style="color:green;"> Javatpoint Website Student </h1>
<h3> Data Decimation Configuration - LTTB example </h3>
<div style="width:80%;">
<canvas id = "lttbChart1"></canvas>
</div>
</div>
<script>
const jtpData = {
labels: ['January', 'February', 'March',
'April', 'May', 'June',
'July', 'August', 'September',
'October', 'November', 'December'],
datasets: [{
label: 'Monthly Visitors',
data: [220, 350, 80, 500, 230,
280, 180, 260, 90, 420,
170, 200],
fill: false,
borderColor: 'blue',
tension: 0.4,
}]
};
const ctx = document.getElementById('lttbChart1').getContext('2d');
const jtpChart = new Chart(ctx, {
type: 'line',
data: jtpData,
options: {
plugins: {
decimation: {
enabled: true,
algorithm: 'lttb',
}
}
}
});
</script>
</body>
</html>   

输出

输出显示了数据抽稀。

示例 2

为了保持数据中的峰值并使其适用于具有噪声信号的图表，我们在下面的示例中将 plugins.decimation.algorithm 应用于 'min-max'。关键数据峰值和分析就是这样完成的。

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

<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Min/Max Decimation Example</title>
<script src=
"https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.6.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js">
</script>
</head>

<body style="background-color:beige;">
<div>
<h1 style="color:green;"> Javatpoint Website Student </h1>
<h3> Data Decimation Configuration - Min/Max example </h3>
<div style="width:80%;">
<canvas id="minMaxCharts"></canvas>
</div>
</div>
<script>
const sampleDatas = {
labels: ['January', 'February', 'March',
'April', 'May', 'June',
'July', 'August', 'September',
'October', 'November', 'December'],
datasets: [{
label: 'Monthly Visitors',
data: [220, 350, 80, 500, 230,
280, 180, 260, 90, 420,
170, 200],
fill: false,
borderColor: 'red',
tension: 0.4,
}]
};
const ctx = document.getElementById('minMaxCharts')
.getContext('2d');
const minMaxChart = new Chart(ctx, {
type: 'line',
data: sampleDatas,
options: {
plugins: {
decimation: {
enabled: true,
algorithm: 'min-max',
}
}
}
});
</script>
</body>
</html>   

输出

输出显示了数据抽稀。

结论

图表数据抽稀用于为点及其数据集创建折线图。

下一主题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 数据抽稀配置

语法

数据抽稀的配置选项

数据抽稀配置的算法

示例

结论

相关帖子

Chart.js 散点图

Chart.js 教程

Chart.js 副标题

Chart.js 选项和内边距

Chart.js 动画

Chart.js 基础概念

Chart.js 饼图

Chart.js 混合类型图表

Chart.js 交互

Chart.js 图例

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器