向 ChartJS X 轴关联添加另一个数据
问题描述 投票：0回答：1
我正在尝试将其他数据添加到我的图表中。 我必须将其中一个代表参考数据。现在我想添加一些显示真实结果的观点。 图表应显示这些点在参考的公差范围内。
但我现在不知道如何解决这个问题。
参考数据和真实数据是不同的数据集。但两者都有相同类型的数据。 例如：两者都有误差值（y 轴）并且都有流量（x 轴）。
但是我怎样才能正确地添加和显示数据呢？
我希望你们每个人都有想法。
调整标签。也尝试过“蜱虫”。 欢迎任何想法。
这就是我现在拥有的图表。靠近中间的点显示错误。 X 轴有流量，最后一点也有流量，例如“250”，但我不能混合 x 轴。
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 class="title">Hello World!</h1>
<p id="currentTime"></p>
<!-- Add the canvas element for the chart -->
<canvas id="errorChart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const ctx = document.getElementById('errorChart').getContext('2d');
// Beispiel-Datensatz für labels, der X- und Y-Werte enthält
let referenceData = [
{ x: 308.75, y: 0.19 }, { x: 292.5, y: 0.22 },
{ x: 276.25, y: 0.21 }, { x: 260, y: 0.19 },
{ x: 243.75, y: 0.17 }, { x: 227.5, y: 0.23 },
{ x: 211.25, y: 0.18 }, { x: 195, y: 0.21 },
{ x: 178.75, y: 0.22 }, { x: 162.5, y: 0.18 },
{ x: 146.25, y: 0.23 }, { x: 130, y: 0.19 },
{ x: 113.75, y: 0.20 }, { x: 97.5, y: 0.26 },
{ x: 81.25, y: 0.32 }, { x: 65, y: 0.39 },
{ x: 48.75, y: 0.49 }, { x: 45.5, y: 0.55 },
{ x: 42.25, y: 0.61 }, { x: 39, y: 0.60 },
{ x: 35.75, y: 0.71 }, { x: 32.5, y: 0.78 },
{ x: 29.25, y: 0.81 }, { x: 26, y: 0.97 },
{ x: 22.75, y: 1.09 }, { x: 19.5, y: 1.22 },
{ x: 16.25, y: 1.47 }, { x: 13, y: 1.85 },
{ x: 9.75, y: 2.48 }, { x: 6.5, y: 3.72 },
{ x: 3.25, y: 7.45 }, { x: 1.625, y: 14.90 },
{ x: 0.975, y: 24.80 }
];
// Sortiere labelsData nach x-Werten in aufsteigender Reihenfolge
referenceData.sort((a, b) => a.x - b.x);
// Extrahiere die X-Werte als Labels für die X-Achse
const labels = referenceData.map(point => point.x.toFixed(2));
// Beispiel-Datensatz für Fehlerdaten mit X- und Y-Werten
const fehlerData = [
{ x: 25, y: 0.08 }, { x: 30, y: -0.07 },
{ x: 35, y: 0.03 }, { x: 45, y: 0.04 },
{ x: 50, y: 0.01 }, { x: 150, y: 0.01 },
{ x: 280, y: 0.01 }
];
// Beispielwerte für positive und negative Kurven, basierend auf fehlerData
const positiveValues = referenceData.map(point => ({
x: point.x,
y: (point.y + 0.05).toFixed(2)
}));
const negativeValues = referenceData.map(point => ({
x: point.x,
y: (point.y - 0.05).toFixed(2)
}));
// Berechne den minimalen und maximalen Wert aus den Daten
const yMin = -1.5;
const yMax = 1.5;
// Chart initialisieren
const errorChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels, // X-Achsen-Werte (aus labelsData extrahiert)
datasets: [
{
label: 'Fehler Punkte', // Bezeichnung für Fehlerpunkte
data: fehlerData, // Fehlerdaten als Punkte (mit X- und Y-Werten)
borderColor: 'transparent', // Keine Linienfarbe
backgroundColor: '#FE661C', // Hintergrundfarbe der Punkte
pointBorderColor: '#FE661C', // Randfarbe der Punkte
pointBackgroundColor: '#FE661C', // Hintergrundfarbe der Punkte
pointStyle: 'rectRot',
pointRadius: 2, // Größe der Punkte
pointHoverRadius: 3, // Größe der Punkte beim Hover
fill: false // Keine Fläche unter der Linie füllen
},
{
label: 'Kurve von -1,5 bis 0,1',
data: negativeValues,
borderColor: '#4FAD2F', // Farbe der Kurve
borderWidth: 2, // Breite der Kurve
tension: 0.8, // Kurvenansicht
cubicInterpolationMode: 'monotone',
pointRadius: 0, // Punkte ausblenden
fill: false // Keine Fläche unter der Kurve füllen
},
{
label: 'Kurve von +1,5 bis 0,1',
data: positiveValues, // Datenpunkte
borderColor: '#004C97', // Farbe der Kurve
borderWidth: 2, // Breite der Kurve
tension: 0.8, // Kurvenansicht
cubicInterpolationMode: 'monotone',
pointRadius: 0, // Punkte ausblenden
fill: false // Keine Fläche unter der Kurve füllen
}
]
},
options: {
animation: false, // Animation deaktivieren
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
title: {
display: true,
text: 'Durchfluss / Flow Rate [kg/h]',
font: {
family: 'Roboto, sans-serif',
weight: 'normal',
size: 14,
color: '#333'
}
},
ticks: {
font: {
family: 'Roboto, sans-serif',
weight: 'normal',
size: 12,
color: '#333'
},
color: '#666'
},
beginAtZero: true,
min: 0,
max: 50,
stepSize: 5,
grid: {
display: false,
color: '#ddd',
borderColor: '#aaa',
borderWidth: 1
}
},
y: {
title: {
display: true,
text: 'Fehler/Error [%]',
font: {
family: 'Roboto, sans-serif',
weight: 'normal',
color: '#333'
}
},
ticks: {
font: {
family: 'Roboto, sans-serif',
weight: 'normal',
color: '#333'
},
callback: function (value) {
return value.toFixed(1); // Formatierung der Y-Werte
},
color: '#666'
},
grid: {
display: false,
color: '#ddd',
borderColor: '#aaa',
borderWidth: 1
},
min: yMin, // Minimale Y-Achsen-Skalierung
max: yMax // Maximale Y-Achsen-Skalierung
}
},
plugins: {
legend: {
display: false, // Legende anzeigen
labels: {
color: '#333',
font: {
family: 'Roboto, sans-serif',
weight: 'normal'
}
},
title: {
display: true,
text: 'Genauigkeitskurve / Accuracy - Curve',
color: '#333',
font: {
family: 'Roboto, sans-serif',
weight: 'normal',
size: 14
}
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.8)',
titleColor: '#fff',
bodyColor: '#fff',
borderColor: '#FF6819',
borderWidth: 1,
padding: 10
}
},
devicePixelRatio: 4
}
});
});
</script>
</body>
</html>1个回答
0
投票
投票
完美。非常感谢！！！这是完美的提示。
我的自定义步长和最小最大现在正在工作！
太棒了。再次感谢您！
最新问题
- Alembic 在自动生成期间不断删除和重新创建外键
- API 和 Web 工具之间的 Pagespeed 结果不同
- MAUI - 更改 iOS 的 AppIcon 和 SplashScreen
- Authorize.net 退款交易错误：命名空间中的子元素“付款”无效
- 使用Python将MySql中的数据导入到Ms.Excel ListObject中
- 如何在cPanel文件管理中编辑大小超过1MB的（PHP）文件？
- 如何从 `script.runInContext` 的结果中获取 AST 表示（无损）？
- Window.open 仅在 axios.post 后返回未定义
- 如何在子文件夹中使用CodeIgniter 4.6？
- JavaScript 中的“辅助变量”是什么？
- Makefile 覆盖命令
- propagate = 永远不会在 spring 中创建事务
- 如何在mysql数据库中存储和显示©和ø并用PHP显示
- 从Android如何检查应用程序是从App Bundle还是APK安装的
- Flutter - 分页数据表底部字体着色和布局
- 设置渲染属性时不调用 JSF commandButton 操作[重复]
- Django HTTP 响应始终设置 `sessionid` cookie 并且会话数据不持久
- 登录时如何切换数据库？
- 配置 sqlfluff，使其不会自动修复特定规则
- 除了 SonarQube [已关闭] 之外还有其他质量管理工具吗
© www.soinside.com 2019 - 2024. All rights reserved.