javascript - Javascript图表未加载
问题描述
我希望将.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 开始(与问题无关,只是分享)。有人知道为什么它不返回任何东西吗?
解决方案
推荐阅读
- php - 如何获取产品所属的类别 - Laravel 6
- reactjs - 如何将两个功能合二为一?react -native
- rest - 指示来自与机器视觉相机(或任何外部设备)交互的 Web API 的 HTTP 响应失败
- pandas - 从列的每一行中删除特定值
- reactjs - react-i18next:全局组件
- python - Django 从 csv 导入(update_or_create)
- arrays - C - 字符串比较,小写
- r - 将管道用于多个 ifelse 函数的问题
- firebase - Firebase 隐私政策
- sql - Oracle SQL 查询将使用子字符串删除重复项,并将重复记录列表链接到另一个表