如何在chart.js中用折线图显示堆叠条形图的总数据和?就像这样:
我找不到解决问题的办法。
owfi6suc1#
你可以使用for循环来计算和,简单如下:(或工作示例:codepen)
<script> const ctx = document.getElementById('myChart'); const chartData = { labels: [ "April", "Mai", "Juni", "Juli", ], datasets: [{ label: "black", backgroundColor: "black", data: [0, 20, 0, 20], stack: 'combined', type: 'bar' }, { label: "red", backgroundColor: "red", data: [0, 0, 0, 25], stack: 'combined', type: 'bar' }, { label: "green", backgroundColor: "green", data: [10, 20, 10, 25], stack: 'combined', type: 'bar' }, ], } var lineData = { label: "line", backgroundColor: "blue", data: [], borderColor: "blue", // stack: 'combined', type: 'line', tension: 0, } for (let i = 0; i < chartData.datasets[0].data.length; i++) { let sum = 0 //or 10 for (let j = 0; j < chartData.datasets.length; j++) { sum += chartData.datasets[j].data[i] } lineData.data.push(sum) } chartData.datasets.unshift(lineData) console.log(chartData) new Chart(ctx, { type: 'bar', data: chartData, options: { plugins: { title: { display: true, text: "dvtq chart", position: "top", align: "start", font: { size: 20, weight: "bold", }, }, }, responsive: true, maintainAspectRatio: true, scales: { x: { stacked: true, }, y: { stacked: true, }, }, }, }); </script>
1条答案
按热度按时间owfi6suc1#
你可以使用for循环来计算和,简单如下:(或工作示例:codepen)