javascript - Chartjs + moment() 未在 django 上显示
问题描述
我已经尝试了这个在线 js 的代码:https ://jsfiddle.net/prfd1m8q/它运行良好但是当我将它粘贴到 Django 上的 index.html 时,如下所示:
<div class="btcprices-chart" id="btcprices">
<canvas id="myChart3"></canvas>
<script>
function newDate(days) {
return moment().add(days, 'd');
}
var config = {
type: 'line',
data: {
labels: [newDate(-4), newDate(-3), newDate(-2), newDate(-1), newDate(0)],
datasets: [{
label: "My First dataset",
data: [10, 11, 12, 13, 14],
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
displayFormats: {
'millisecond': 'MMM DD',
'second': 'MMM DD',
'minute': 'MMM DD',
'hour': 'MMM DD',
'day': 'MMM DD',
'week': 'MMM DD',
'month': 'MMM DD',
'quarter': 'MMM DD',
'year': 'MMM DD',
}
}
}],
},
}
};
var ctx = document.getElementById("myChart3").getContext("2d");
new Chart(ctx, config);
</script>
</div>
我什么都没有显示(请注意,我将chartjs与其他值一起使用并且它正在工作,但是当我尝试这种方法“只是为了显示日期”它不起作用)知道为什么吗?
解决方案
您可以通过附加标签单独导入 Moment.js,而不是使用 Chart.js 的捆绑版本script
,它应该可以工作。
请查看您修改后的可运行代码。
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<div class="btcprices-chart" id="btcprices">
<canvas id="myChart3"></canvas>
<script>
function newDate(days) {
return moment().add(days, 'd');
}
var config = {
type: 'line',
data: {
labels: [newDate(-4), newDate(-3), newDate(-2), newDate(-1), newDate(0)],
datasets: [{
label: "My First dataset",
data: [10, 11, 12, 13, 14],
}]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
displayFormats: {
'millisecond': 'MMM DD',
'second': 'MMM DD',
'minute': 'MMM DD',
'hour': 'MMM DD',
'day': 'MMM DD',
'week': 'MMM DD',
'month': 'MMM DD',
'quarter': 'MMM DD',
'year': 'MMM DD',
}
}
}],
},
}
};
var ctx = document.getElementById("myChart3").getContext("2d");
new Chart(ctx, config);
</script>
</div>
推荐阅读
- javascript - JavaScript Date.getUTCMilliSeconds() 不起作用
- vue.js - 如何在 vuex 商店中存储 $i18n.locale?
- python - 为什么方法“isspace”在条件语句中接受非空格字符?
- python - 如何在每组 5 个数字之前打印块而不添加新变量?
- angular - 从反应形式驱动材料日期选择器控制
- prolog - 如何使用占位符在 Prolog 中创建谓词?
- javascript - 使用 React-Bootstrap 的网格布局在 Columns 中重新定位 div
- scrapy - 我升级了 pyOpenSSL 但它仍然是 0.13.1 版本。无法升级到 18.0.0
- javascript - Webpack 4 - 动态导入无法设置正确的位置
- python - 在 Python 中查找变量的总和