Javascript 图表未加载

发布时间:2021-02-25 06:30

我希望将 .js 文件中的图表构建到我的 html 模板中,但是在加载页面时,我有一个白色的图表区域。下面是带有注释的代码,其中包含图表初始化中每条指令的注释,以及变量的引入:

var OrdersChart = (function() {
  var $chart = $('#chart-orders');
  var $ordersSelect = $('[name="ordersSelect"]');


  //
  // Methods
  //

  // Init chart
  function initChart($chart) {

// Create chart
var ordersChart = new Chart($chart, {
  type: 'bar',
  options: {
    scales: {
      yAxes: [{
        gridLines: {
          lineWidth: 1,
          color: '#dfe2e6',
          zeroLineColor: '#dfe2e6'
        },
        ticks: {
          callback: function(value) {
            if (!(value % 10)) {
              //return '$' + value + 'k'
              return value
            }
          }
        }
      }]
    },
    tooltips: {
      callbacks: {
        label: function(item, data) {
          var label = data.datasets[item.datasetIndex].label || '';
          var yLabel = item.yLabel;
          var content = '';

          if (data.datasets.length > 1) {
            content += '<span class="popover-body-label mr-auto">' + label + '</span>';
          }

          content += '<span class="popover-body-value">' + yLabel + '</span>';

          return content;
        }
      }
    }
  },
  data: {
    labels: ['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: [{
      label: 'Sales',
      data: [25, 20, 30, 22, 17, 29]
    }]
  }
});

// Save to jQuery object
$chart.data('chart', ordersChart);


}
  // Init chart
  if ($chart.length) {
    initChart($chart);
  }

})();

html如下:

    <div class="card-body">
      <!-- Chart -->
      <div class="chart">
        <canvas id="chart-orders" class="chart-canvas"></canvas>
      </div>
    </div>

我从 Django 开始(与问题无关,只是分享)。有人知道为什么它不返回任何东西吗?

回答1