图表 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>