我使用https://www.chartjs.org/ 。在下面的示例中，我列出了两周内每天的值。为此，我想要一行该时期的平均值。
用chartjs可以吗？如果可以的话怎么办？
我已经开始，但它遵循条形位置，并且应该创建一条包含更少点的新路径。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<script>
var ctx = document.getElementById('canvas').getContext('2d');
var mixedChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
label: 'Bar Dataset',
data: [1, 2, 3, 1, 3, 4, 7, 2, 4, 3, 1, 6, 5, 2],
backgroundColor: "#FF9881",
order: 2
}, {
label: 'Line Dataset',
data: [1, 2],
type: 'line',
borderColor: "#FF312D",
fill: false,
borderWidth: 1,
order: 1
}],
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
},
options: {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
});
</script>
</body>
</html>最佳答案
我会计算平均值并将其分布在整个图表上，如下所示:
const getLineData = (initialData, lengthOfDataChunks) => {
const numOfChunks = Math.ceil(initialData.length / lengthOfDataChunks);
const dataChunks = [];
for (var i = 0; i < numOfChunks; i++) dataChunks[i] = [];
initialData.forEach((entry, index) => {
const chunkNumber = Math.floor(index / lengthOfDataChunks);
dataChunks[chunkNumber]
dataChunks[chunkNumber].push(entry);
});
const averagedChunks = dataChunks.map(chunkEntry => {
const chunkAverage = chunkEntry.reduce(sumArray) / lengthOfDataChunks;
return chunkEntry.map(chunkEntryValue => chunkAverage);
});
return averagedChunks.flat();
}
const ctx = document.getElementById('canvas').getContext('2d');
const barData = [1, 2, 3, 1, 3, 4, 7, 2, 4, 3, 1, 6, 5, 2];
const sumArray = (accumulator, currentValue) => accumulator + currentValue;
const averageBarValue = barData.reduce(sumArray) / barData.length;
const lineData = getLineData(barData, 7);
var mixedChart = new Chart(ctx, {
type: 'bar',
data: {
datasets: [{
label: 'Bar Dataset',
data: barData,
backgroundColor: "#FF9881",
order: 2
}, {
label: 'Line Dataset',
data: lineData,
type: 'line',
borderColor: "#FF312D",
fill: false,
borderWidth: 1,
order: 1
}],
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
},
options: {
"scales": {
"yAxes": [{
"ticks": {
"beginAtZero": true
}
}]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="canvas"></canvas>我希望我的问题是正确的。如果没有，请告诉我!
关于javascript - Chartjs 柱上平均线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62610077/