图表 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 = {&nbsp; type: 'bar',&nbsp; data: {&nbsp; &nbsp; //labels: ["Label1", "Label2"],&nbsp; &nbsp; labels: ["the labels"],&nbsp; &nbsp; datasets: [{&nbsp; &nbsp; &nbsp; data: [45000],&nbsp; &nbsp; &nbsp; label: "Label 1",&nbsp; &nbsp; &nbsp; backgroundColor: "#3e95cd",&nbsp; &nbsp; }, {&nbsp; &nbsp; &nbsp; data: [40000],&nbsp; &nbsp; &nbsp; label: "Label 2",&nbsp; &nbsp; &nbsp; backgroundColor: "#8e5ea2",&nbsp; &nbsp; }, ]&nbsp; },&nbsp; options: {&nbsp; &nbsp; legend: {&nbsp; &nbsp; &nbsp; display: true,&nbsp; &nbsp; &nbsp; position: "bottom",&nbsp; &nbsp; &nbsp; labels: {&nbsp; &nbsp; &nbsp; &nbsp; fontColor: 'rgb(0, 0, 0)'&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; scales: {&nbsp; &nbsp; &nbsp; yAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; beginAtZero: true&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; }&nbsp; }}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;">&nbsp; <div class="chart-wrapper">&nbsp; &nbsp; <canvas id="bar-chart" width="400" height="400" aria-label="Chart" role="img"></canvas>&nbsp; </div></div>