如何在 chart.js 中制作曲線條形圖或曲線柱形圖？

Question

我們正在嘗試創建類似於下圖的曲線列，它在 chart.js 中看起來不可能

對此有何建議？

Answer 1

您可以使用line圖來完成此操作，如下面的代碼示例所示，需要進一步改進以獲得您期望的結果。

 new Chart(document.getElementById('myChart'), { type: 'line', data: { labels: [1, 2, 3, 4, 5, 6, 7], datasets: [ { data: [0, 5, 0, 0, 0, 0, 0], fill: true, backgroundColor: 'rgb(255, 0, 0, 0.7)', backgroundColor: 'rgb(255, 0, 0, 0.7)', lineTension: 0.4, pointHitRadius: 0 }, { data: [0, 0, 9, 0, 0, 0, 0], fill: true, backgroundColor: 'rgb(255,165,0, 0.7)', backgroundColor: 'rgb(255,165,0, 0.7)', lineTension: 0.6, pointHitRadius: 0 }, { data: [0, 0, 0, 6, 0, 0, 0], fill: true, backgroundColor: 'rgb(255, 215, 0, 0.7)', backgroundColor: 'rgb(255, 215, 0, 0.7)', lineTension: 0.6, pointHitRadius: 0 }, { data: [0, 0, 0, 0, 5, 0, 0], fill: true, backgroundColor: 'rgb(59, 161, 151, 0.7)', backgroundColor: 'rgb(59, 161, 151, 0.7)', lineTension: 0.6, pointHitRadius: 0 }, { data: [0, 0, 0, 0, 0, 4, 0], fill: true, backgroundColor: 'rgb(100, 100, 100, 0.7)', backgroundColor: 'rgb(100, 100, 100, 0.7)', lineTension: 0.4, pointHitRadius: 0 } ] }, options: { responsive: true, elements: { point:{ radius: 0 } }, title: { display: false, }, legend: { display: false }, tooltips: { display: false }, scales: { yAxes: [{ ticks: { display: false }, gridLines: { display: false } }], xAxes: [{ ticks: { display: false }, gridLines: { display: false } }], } } });

 canvas { max-width: 300px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <canvas id="myChart" height="200"></canvas>