我希望将 .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 开始(与问题无关,只是分享)。有人知道为什么它不返回任何东西吗?