我正在制作一个需要显示图表的网站。为此，我决定使用图表JS。
问题是，当我试图在同一页上加载多个图表时，我无法做到。
由于某种原因，它只加载了一个图表，但第二个图表没有加载。
我已经检查了变量名称和ID，我没有看到失败可能在哪里。
谢谢你，谢谢你
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="./assets/css/normalize.css">
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<!-- CONTENIDO PRINCIPAL -->
<main id="main-content">
<div class="general-chart">
<span>X€</span><br>
<span style="font-size: 0.9em; font-weight: 400;">in Octobre</span>
<canvas id="myChart"></canvas>
</div>
<div class="income-chart">
<canvas id="myChart_second"></canvas>
</div>
</main>
<!-- CHART JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"
integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA=="
crossorigin="anonymous"
referrerpolicy="no-referrer">
</script>
<!-- Scripts -->
<script src="./js/menu.js"></script>
<!-- GRAFICO SALDO -->
<script>
const ctx = document.getElementById("myChart").getContext("2d");
const labels = [
'2012',
'2013',
'2014',
'2015',
'2016',
'2017',
'2018',
'2019',
'2020',
];
//Gradient Fill
var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(105,53,211, 1');
gradient.addColorStop(1, 'rgba(105,53,211, 0.2');
const data = {
labels,
datasets: [
{
data: [211, 326, 165, 350, 420, 370, 500, 376, 415],
label: 'Titulo',
fill: true,
backgroundColor: gradient,
borderColor: '#6935D3',
pointBackgroundColor: '#4D1BB1',
},
],
};
const config = {
type: 'line',
data: data,
options: {
responsive: true,
plugins: {legend:{display: false}},
scales: {
x: {
grid: {
display: false,
drawBorder: false
}
},
y: {
grid: {
display: false,
drawBorder: false
},
ticks: {
display: false
},
}
},
},
};
const myChart = new Chart(ctx, config);
</script>
<!-- GRAFICO INGRESOS -->
<script>
const ctx2 = document.getElementById("myChart_second").getContext("2d");
const labels2 = [
'2012',
'2013',
'2014',
'2015',
'2016',
'2017',
'2018',
'2019',
'2020',
];
const data2 = {
labels2,
datasets: [
{
data: [211, 326, 165, 350, 420, 370, 500, 376, 415],
label: 'Title',
fill: true,
backgroundColor: gradient,
borderColor: '#6935D3',
pointBackgroundColor: '#4D1BB1',
},
],
};
const config2 = {
type: 'line',
data: data2,
options: {
responsive: true,
plugins: {legend:{display: false}},
scales: {
x: {
grid: {
display: false,
drawBorder: false
}
},
y: {
grid: {
display: false,
drawBorder: false
},
ticks: {
display: false
},
}
},
},
};
const myChart2 = new Chart(ctx2, config2);
</script>
</body>
</html>
2条答案
按热度按时间carvr3hs1#
由于找不到labels2，因此未显示，请在下面进行更改
pbpqsu0x2#
您必须使用“标签：labels2”。如果只使用变量，则变量名称将自动用作属性名称。