如何使用 Chart.js 渲染相同的圖表
[英]how to render the same chart using Chart.js
問題描述
我正在嘗試在 div 上添加更多圖表，我想使用 for 循環或其他方式在同一頁面上呈現更多圖表。 我可以使用粘貼另一個圖表來呈現圖表。 但我想使用 for 循環或 vanila javascript 中的東西來呈現更多圖表。 我想知道這是否可能。
1 個解決方案
解決方案1
0 已采納 2021-05-10 12:20:18
是的，這是可能的，您可以在 for 循環中調用新圖表，確保保存圖表實例以便以后使用它們
例子：
const charts = { options0: { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderWidth: 1 } ] }, options: {} }, options1: { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderWidth: 1 } ] }, options: {} }, options2: { type: 'radar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderWidth: 1 } ] }, options: {} } } let activeCharts = []; for (let i = 0; i < Object.keys(charts).length; i++) { activeCharts.push(new Chart(document.getElementById(`con${i}`).getContext('2d'), charts[`options${i}`])); }
<body> <canvas id="con0" width="600" height="400"></canvas> <canvas id="con1" width="600" height="400"></canvas> <canvas id="con2" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js" integrity="sha512-opXrgVcTHsEVdBUZqTPlW9S8+99hNbaHmXtAdXXc61OUU6gOII5ku/PzZFqexHXc3hnK8IrJKHo+T7O4GRIJcw==" crossorigin="anonymous"></script> </body>
如何使用 Chart.js 使圖表的背景顏色為漸變
[英]How to make the background color of the chart as gradient using Chart.js
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.