'scales'选项似乎会破坏Chart.js图 [英] 'scales' option appears to break Chart.js graph
问题描述
我正在尝试使用Chart.js在我的Django项目中包括一些股票数据的折线图.我可以使用我想要的数据来绘制简单的图表，但是当我尝试格式化日期和时间的X轴时，图表将不再呈现.这是文件的工作版本(client_small_market_view.html):
I'm trying to include a line chart for some stock data in my django project using Chart.js. I can render a simple chart with the data I want just fine, but when I try to format the x-axis for date and time, the chart doesn't render anymore. Here's the working version of the file (client_small_market_view.html):
{% load static %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<div id="container" class="chartjs-wrapper">
<canvas id="stock-chart" class="chartjs" style="display: block;"></canvas>
</div>
<script>
var dateFormat = 'YYYY-MM-DD';
// the dates come ins as a list of strings formatted YYYY-MM-DD, so I use this function here to
// convert to Date
function parseDate(date){
var parts = date.split("-");
return new Date(parts[0], parts[1] - 1, parts[2])
};
var config = {
type: "line",
data: {
labels: {{ market_data.1|safe }}.map(dateString =>parseDate(dateString)),
datasets: [
{
label: "{{ market_data.0.0.0|safe }}",
data: {{ market_data.0.1.0|safe }},
fill: false,
},
],
},
options:{
title:{
text: 'Market',
display: true
},
}
};
var ctx = document.getElementById('stock-chart');
var chart = new Chart(ctx, config);
</script>
这是它在我端生成的图.
And here is the graph it produces on my end.
但是，添加比例"选项以设置x轴标签的格式，如此处
However, adding in the 'scales' option to format the x-axis labels like here
{% load static %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<div id="container" class="chartjs-wrapper">
<canvas id="stock-chart" class="chartjs" style="display: block;"></canvas>
</div>
<script>
var dateFormat = 'YYYY-MM-DD';
function parseDate(date){
var parts = date.split("-");
return new Date(parts[0], parts[1] - 1, parts[2])
};
var config = {
type: "line",
data: {
labels: {{ market_data.1|safe }}.map(dateString =>parseDate(dateString)),
datasets: [
{
label: "{{ market_data.0.0.0|safe }}",
data: {{ market_data.0.1.0|safe }},
fill: false,
},
],
},
options: {
title:{
text: 'Market',
display: true
}
// when I take 'scales' out the chart renders fine,
// but I need it to format the x-axis dates
scales: {
xAxes: [{
type: 'time',
time: {
parser: 'YYYY-MM-DD',
unit: 'day',
displayFormats: {
'day': 'YYYY-MM-DD'
}
},
ticks: {
source: 'data'
}
}]
}
}
};
var ctx = document.getElementById('stock-chart');
var chart = new Chart(ctx, config);
</script>
用一块空白的帆布给我.我花了很多小时试图找出问题所在，但无法解决.作为参考，此html文档包含在作为应用程序主页的父文档中:
leaves me with a blank canvas. I've spent hours and hours trying to figure out what the problem is, but can't figure it out. For reference this html doc is included in a parent doc that serves as the home page for the app :
{% include './client_navbar.html'%}
{% include './client_small_market_view.html' with market_data=market_data%}
{% include './client_portfolios_summary_view.html' with portfolioss=portfolios %}
此外，我还在使用Bootstrap 4.4.1，但我无法想象这就是问题的原因.任何提示将不胜感激！
In addition I'm also using Bootstrap 4.4.1, but I can't imagine that's the reason for the problem. Any tips would be greatly appreciated!
推荐答案
它似乎对我有用.您是否已在浏览器中签入以确保没有引发任何阻止图表显示的JS异常?
It seems to work for me. Have you checked in your browser to make sure you're not getting any JS exceptions being thrown that are preventing the chart from being displayed?
具体来说，我认为您需要在以下位置添加力矩模块( https://momentjs.com/)使用顺序
Specifically, I believe you need to include the moment module (https://momentjs.com/) in order to use
type: 'time'
如果模块由于某种原因未加载，则可能引发异常并为您提供空白图表.
If the module is not loading for some reason, it could be throwing an exception and giving you a blank chart.
这是另一个描述类似问题的参考: ChartJS不显示时间数据使用Moment.js
Here's another reference describing a similar problem: ChartJS not displaying time data using Moment.js
这篇关于'scales'选项似乎会破坏Chart.js图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
