Chart JS 不顯示數據

Question

嘿，伙計們，我用一些數據制作了條形圖，當我查看它時，它只顯示第一個條形圖，而第二個條形圖向下……不知道為什么。 試圖更改數據，但仍然沒有任何反應......所以數據無關緊要，我看了文檔並沒有發現任何問題

 var optionsTwo = { type: 'bar', data: { labels: ["Label1", "Label2"], datasets: [{ data: [45000], label: "Label", backgroundColor: "#3e95cd", }, { data: [40000], label: "Label2", backgroundColor: "#8e5ea2", }, ] }, options: { legend: { display: true, position: "bottom", labels: { fontColor: 'rgb(0, 0, 0)' } } } } var ctxOne = document.getElementById('bar-chart').getContext('2d'); new Chart(ctxOne, optionsTwo);

 <link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> <div class="chart-second" style=" height: 80vh; margin: 0 auto;"> <div class="chart-wrapper"> <canvas id="bar-chart" width="400" height="400" aria-label="Chart" role="img" ></canvas> </div> </div>

Answer 1

這是工作代碼。

 var optionsTwo = { type: 'bar', data: { //labels: ["Label1", "Label2"], labels: ["the labels"], datasets: [{ data: [45000], label: "Label 1", backgroundColor: "#3e95cd", }, { data: [40000], label: "Label 2", backgroundColor: "#8e5ea2", }, ] }, options: { legend: { display: true, position: "bottom", labels: { fontColor: 'rgb(0, 0, 0)' } }, scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } } var ctxOne = document.getElementById('bar-chart').getContext('2d'); new Chart(ctxOne, optionsTwo);

 <link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> <div class="chart-second" style=" height: 80vh; margin: 0 auto;"> <div class="chart-wrapper"> <canvas id="bar-chart" width="400" height="400" aria-label="Chart" role="img"></canvas> </div> </div>