У меня проблемы с запуском диаграммы. js на моем веб-сайте, автономная html версия отлично работает для меня и в localhost, и на веб-сервере, однако, когда я помещаю ее на свой сайт, она помечает следующую ошибку.
Uncaught TypeError: Cannot read property 'fontSize' of undefined
at Object._parseFont (chart.js@2.8.0:7)
at i.fit (chart.js@2.8.0:7)
at i.update (chart.js@2.8.0:7)
at chart.js@2.8.0:7
at Object.each (chart.js@2.8.0:7)
at Object.update (chart.js@2.8.0:7)
at ni.updateLayout (chart.js@2.8.0:7)
at ni.update (chart.js@2.8.0:7)
at i.<anonymous> (chartjs-plugin-datasource@0.1.0:7)
at XMLHttpRequest.n.onreadystatechange (chartjs-plugin-datasource@0.1.0:7)
_parseFont @ chart.js@2.8.0:7
fit @ chart.js@2.8.0:7
update @ chart.js@2.8.0:7
(anonymous) @ chart.js@2.8.0:7
each @ chart.js@2.8.0:7
update @ chart.js@2.8.0:7
updateLayout @ chart.js@2.8.0:7
update @ chart.js@2.8.0:7
(anonymous) @ chartjs-plugin-datasource@0.1.0:7
n.onreadystatechange @ chartjs-plugin-datasource@0.1.0:7
XMLHttpRequest.send (async)
request @ chartjs-plugin-datasource@0.1.0:7
beforeUpdate @ chartjs-plugin-datasource@0.1.0:7
notify @ chart.js@2.8.0:7
update @ chart.js@2.8.0:7
construct @ chart.js@2.8.0:7
ni @ chart.js@2.8.0:7
window.onload @ chart1.js:90
load (async)
(anonymous) @ chart1.js:88
Я поместил свой код js для диаграммы в отдельный файл chart1. js, содержимое которого выглядит следующим образом.
var chartColors = {
red: 'rgb(255, 99, 132)',
blue: 'rgb(54, 162, 235)',
orange: 'rgb(255,127,80)',
blue2: 'rgb(0,204,204)'
};
var color = Chart.helpers.color;
var config = {
type: 'bar',
data: {
datasets: [{
type: 'line',
yAxisID: 'heapUsed',
backgroundColor: 'transparent',
borderColor: chartColors.red,
pointBackgroundColor: chartColors.red,
tension: 0,
fill: false
},
{
type: 'line',
yAxisID: 'heapUsed',
backgroundColor: 'transparent',
borderColor: chartColors.orange,
pointBackgroundColor: chartColors.orange,
tension: 0,
fill: false
},
{
yAxisID: 'processCpuLoad',
backgroundColor: color(chartColors.blue).alpha(0.5).rgbString(),
borderColor: 'transparent'
},
{
yAxisID: 'processCpuLoad',
backgroundColor: color(chartColors.blue2).alpha(0.5).rgbString(),
borderColor: 'transparent'
}]
},
plugins: [ChartDataSource],
options: {
title: {
display: true,
text: 'CSV data source (dataset) sample'
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Time'
}
}],
yAxes: [{
id: 'heapUsed',
gridLines: {
drawOnChartArea: false
},
scaleLabel: {
display: true,
labelString: 'heapUsed(MB)'
}
}, {
id: 'processCpuLoad',
position: 'right',
gridLines: {
drawOnChartArea: false
},
scaleLabel: {
display: true,
labelString: 'processCpuLoad (%)'
}
}]
},
plugins: {
datasource: {
type: 'csv',
url: 'sample-dataset.csv',
delimiter: ',',
rowMapping: 'dataset',
datasetLabels: true,
indexLabels: true
}
}
}
};
window.onload = function() {
var ctx = document.getElementById('myChart').getContext('2d');
window.myChart = new Chart(ctx, config);
};
и мой html внутри div.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-md-6 col-sm-6">
<div class="chart">
<canvas id="myChart"></canvas>
</div>
</div>
</div>
<script src="custom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script>
<script src="chart1.js" type="text/javascript"></script>
</body>
</html>
я пробовал с разными версиями диаграммы. js, все выдают одну и ту же ошибку, в стеке много вопросов, связанных с одной и той же ошибкой, я пробовал все из них, но ни один не работал, поэтому размещение для руководства.