我正在使用Chart.js创建一个图表,但是由于某种原因,它没有创建。什么都没有发生,字面上。控制台也是空的,即使我使用console.log。下面我将显示代码和html,可能我不能注意到一些错误。真的不明白是什么问题。请帮助!
HTML语言
<div class="chart">
<canvas id="myChart" width="400" height="150"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="./src/js/graph.js"></script>
JS系统
function removeElementsByClass(className)
{
const elements = document.getElementsByClassName(className);
while(elements.length > 0)
{
elements[0].parentNode.removeChild(elements[0]);
}
}
function draw_graph(graph_data, header)
{
var accepted = [], rejected = [], timestamps = [];
if(typeof header === 'undefined') header = '';
for(var timestamp in graph_data)
{
accepted.push(Math.round(graph_data[timestamp]['a']));
timestamps.push(timestamp);
}
Chart.defaults.global.defaultFontFamily = 'Verdana';
Chart.defaults.global.defaultFontStyle = 'normal';
Chart.defaults.global.defaultFontColor = '#0B6FAB';
Chart.defaults.global.defaultFontSize = 11;
Chart.defaults.global.legend = false;
removeElementsByClass('chartjs-hidden-iframe');
new Chart(document.getElementById("myChart"), {
type:'line',
data:
{
labels: timestamps,
datasets: [{
label: "accepted",
data: accepted,
borderColor: '#0B6FAB',
backgroundColor: '#CBFFFF',
borderWidth: 2,
fill: false,
pointRadius: 0
}
]
},
options:
{
title:
{
display: true,
text: header,
fontSize: 16
},
legend:
{
labels:
{
fontColor: '#C0C0C0'
}
},
scales: {
yAxes: [{
position: 'right',
gridLines: {
drawBorder: false,
display:false
},
display: false,
ticks: {
beginAtZero: true,
maxTicksLimit: 3,
fontStyle: 'bold',
fontColor: '#C0C0C0',
fontSize: 9,
userCallback: function(label, index, labels)
{
if(label !== 0)
{
return label;
}
},
},
scaleLabel: {
},
pointLabels:
{
}
}],
xAxes: [{
gridLines: {
drawBorder: false,
display:true
},
ticks: {
beginAtZero: true,
autoSkip: true,
maxTicksLimit: 6,
fontColor: '#C0C0C0',
fontSize: 9,
maxRotation: 0,
minRotation: 0
}
}]
}
}});
};
1条答案
按热度按时间yyhrrdl81#
一开始有一个打字错误显示在控制台错误中(在缩放设置中缺少一个',')。另一个问题是在页面加载后,您实际上没有调用draw_graph函数。类似以下内容将帮助您开始: