Chartjs 平均線超過條形圖
[英]Chartjs average line over bars
問題描述
我使用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>
2 個解決方案
解決方案1
1 2020-06-27 12:41:44
我會計算平均值並將其分布在整個圖表上，如下所示：
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>
我希望你的問題是正確的。 如果沒有，請告訴我！
解決方案2
1 2022-02-14 18:13:02
如果您的要求只是繪制一條平坦的平均線，我會為他們的官方注釋插件 [ chartjs-plugin-annotation ] 提供 go。
我將在這里插入一個非常基本的、自洽的例子，改編自他們的文檔。
索引.html ：
<html> <head> <script src="index.js"></script> </head> <body> <canvas id="canvas"></canvas> </body> </html>
anyname.js [然后你需要將其瀏覽到index.js源文件]：
/* the following is just a shortcut to register all the needed elements, for any chart. more info here: https://www.chartjs.org/docs/3.3.0/getting-started/integration.html#bundlers-webpack-rollup-etc */ const Chart = require("chart.js/auto"); const annotationPlugin = require("chartjs-plugin-annotation"); function average(ctx) { const values = ctx.chart.data.datasets[0].data; return values.reduce((a, b) => a + b, 0) / values.length; } const data = { labels: ["1", "2", "3", "4", "5", "6", "7"], datasets: [ { label: "Sample Series", data: [40, 100, 54, 34, 13, 78, 41] } ] }; const annotation = { type: 'line', borderColor: 'black', borderDash: [6, 6], borderDashOffset: 0, borderWidth: 3, label: { enabled: true, content: (ctx) => "Average: " + average(ctx).toFixed(2), position: 'end' }, scaleID: 'y', value: (ctx) => average(ctx) }; const config = { type: 'bar', data, options: { plugins: { title: { display: true, text: "Sample Chart", font: { size: 14 } }, annotation: { annotations: { annotation } } } } }; // the annotation plugin needs to be registered, too Chart.register(annotationPlugin); document.addEventListener('DOMContentLoaded', () => { const myChart = new Chart(document.getElementById('canvas'), config); }, false);
節點所需的庫[你需要安裝 browserify 才能工作]：
- chart.js -- 第 3.7.1 節
- chartjs-plugin-annotation -- v. 1.3.1
參考：
https://www.chartjs.org/chartjs-plugin-annotation/1.2.0/samples/line/average.html
Chartjs線圖越過面板
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.