图表上我的 ChartJ 的标题未定义，但我无法更改它，因为我的标签使用一个函数：Object.keys(groupMedia)

Question

图表上我的图表J的标题未定义，但我无法更改它，因为我的标签使用了一个函数：Object.keys(groupMedia(

你能告诉我应该怎么做才能将名称插入chartJS表中，而不是像图像中那样未定义吗？

表中未定义的写入位置

->CHARTJS定义为

const ctx = document.getElementById('grafico').getContext('2d');
myChart = new Chart(ctx, {
type: 'line',
data: {
labels: Object.keys(grupoMedia),
datasets: [
{
//  text: 'Something2'
data: Object.values(grupoMedia)
}
]
}
});

我的所有JS代码

const Chart = require('chart.js');
const Leaflet = require('leaflet');
let edtUrlDados = document.getElementById("urlDados");
let btnCarregarDados = document.querySelector("button");
let latestlabel;
let teste;
var myChart;
let valordados = new Array();
console.log(edtUrlDados.value);
function transformarDados(texto) {
let linhas = texto.split("n");
let colunas = linhas[0].split("t");
let dados = new Array();
for (let i = 1; i < linhas.length; i++) {
let valores = linhas[i].split("t");
obj = {}
for (let j = 0; j < colunas.length; j++) {
obj[colunas[j]] = valores[j];
}
if (obj["Município"] == "PETROPOLIS") {
dados.push(obj);            
}
}
return dados;
}
function atualizarTabela(dados) {
// colunas da tabela
let thead_tr = document.querySelector("table > thead > tr");    
for (let coluna in dados[0]) {
let th = document.createElement('th');
th.textContent = coluna;
thead_tr.appendChild(th);
}
let tbody = document.querySelector("table > tbody");
for (let obj of dados) {
let tbody_tr = document.createElement('tr');
for (let nomePropriedade in obj) {
let td = document.createElement('td');
td.innerHTML = obj[nomePropriedade];
tbody_tr.appendChild(td);
}
tbody.appendChild(tbody_tr);
}
}
function atualizarGrafico(dados) {
let grupo = {};
for (let obj of dados) {
let x = obj["Valor de Venda"];
let y = obj["Data da Coleta"];
if (grupo[y] === undefined) {
grupo[y] = new Array();
}
grupo[y].push(x);
}
let grupoMedia = {};
for (let nomePropriedade in grupo) {
let soma = 0;
for (let v of grupo[nomePropriedade]) {
soma += parseInt(v);
}       
let quantidade = grupo[nomePropriedade].length;         
grupoMedia[nomePropriedade] = soma / quantidade;
}
console.log(grupoMedia);
console.log(Object.values(grupoMedia));

const ctx = document.getElementById('grafico').getContext('2d');
myChart = new Chart(ctx, {
type: 'line',
data: {
labels: Object.keys(grupoMedia),
datasets: [
{
//  text: 'Something2'
data: Object.values(grupoMedia)
}
]
}
});
}
var chkgasolina = document.getElementById("gasolina");
var chketanol = document.getElementById("etanol");
var absoluto = document.getElementById("absoluto");
var variacao = document.getElementById("variacao");
absoluto.checked = true;
function fillGrafico(){
limparGrafico();
if(chketanol.checked == true){

let linhas = teste.split("n");
let colunas = linhas[0].split("t");
let dados2 = new Array();
for (let i = 1; i < linhas.length; i++) {
let valores = linhas[i].split("t");
obj = {}
for (let j = 0; j < colunas.length; j++) {
obj[colunas[j]] = valores[j];
}
if (obj["Produto"] == "ETANOL") {
dados2.push(obj);           
}
}
addDataE(dados2);

}
if(chkgasolina.checked == true){

let linhas = teste.split("n");
let colunas = linhas[0].split("t");
let dados2 = new Array();
for (let i = 1; i < linhas.length; i++) {
let valores = linhas[i].split("t");
obj = {}
for (let j = 0; j < colunas.length; j++) {
obj[colunas[j]] = valores[j];
}
if (obj["Produto"] == "GASOLINA") {
dados2.push(obj);           
}
if (obj["Produto"] == "GASOLINA ADITIVADA") {
dados2.push(obj);           
}
}
addDataG(dados2);

}
}
chkgasolina.onchange = function(){
fillGrafico();
}
chketanol.onchange = function(){
fillGrafico();
}
absoluto.onchange = function(){
if(absoluto.checked == true){
fillGrafico();
}
}

variacao.onchange = function(){
if(variacao.checked == true){
fillGrafico();
}
}

function limparGrafico(){
for(let i=0; i<myChart.data.datasets.length; i++){
myChart.data.datasets.pop(-1);
}
myChart.data.datasets = [];
myChart.update();
}

function removeDataG() {
myChart.data.datasets.pop(-2);
myChart.update();
console.log("foi?");
}
function addDataG(dados2) {
let grupo = {};

for (let obj of dados2) {
let x = obj["Valor de Venda"];
let y = obj["Data da Coleta"];
if (grupo[y] === undefined) {
grupo[y] = new Array();
}
grupo[y].push(x);

}

let grupoMedia = {};
for (let nomePropriedade in grupo) {
let soma = 0;
for (let v of grupo[nomePropriedade]) {
soma += parseInt(v);
}       
let quantidade = grupo[nomePropriedade].length;         
grupoMedia[nomePropriedade] = soma / quantidade;
}
if(variacao.checked==true){
let grupov = Object.values(grupoMedia);
let r = new Array();
for (let i = 0; i<grupov.length;i++){
r.push(0);
if(i==0){
r[i]=0;}else{
r[i]=((grupov[i]/grupov[i-1])-1)*100;
}
}
var newDataset = {
labels: Object.keys(grupoMedia),
backgroundColor: 'rgba(165, 42, 42, 1)',
borderColor: 'rgba(165, 42, 42, 1)',
borderWidth: 1,
data: r,
}   
}else{
var newDataset = {
labels: Object.keys(grupoMedia),
backgroundColor: 'rgba(165, 42, 42, 1)',
borderColor: 'rgba(165, 42, 42, 1)',
borderWidth: 1,
data: Object.values(grupoMedia),
}
}
myChart.data.datasets.push(newDataset);
myChart.update();
}
function addDataE(dados2) {
let grupo = {};
for (let obj of dados2) {
let x = obj["Valor de Venda"];
let y = obj["Data da Coleta"];
if (grupo[y] === undefined) {
grupo[y] = new Array();
}
grupo[y].push(x);
}
let grupoMedia = {};
for (let nomePropriedade in grupo) {
let soma = 0;
for (let v of grupo[nomePropriedade]) {
soma += parseInt(v);
}       
let quantidade = grupo[nomePropriedade].length;         
grupoMedia[nomePropriedade] = soma / quantidade;
}
if(variacao.checked==true){
let grupov = Object.values(grupoMedia);
let r2 = new Array();
for (let i = 0; i<grupov.length;i++){
r2.push(0);
if(i==0){
r2[i]=0;}else{
r2[i]=((grupov[i]/grupov[i-1])-1)*100;
}
}
var dataset1 = {
labels: Object.keys(grupoMedia),
backgroundColor: 'rgba( 30, 144, 255, 1 )',
borderColor: 'rgba( 30, 144, 255, 1 )',
borderWidth: 1,
data: r2,

}   
}else{
var dataset1 = {
labels: Object.keys(grupoMedia),
backgroundColor: 'rgba( 30, 144, 255, 1 )',
borderColor: 'rgba( 30, 144, 255, 1 )',
borderWidth: 1,
data: Object.values(grupoMedia),
}
}
myChart.data.datasets.push(dataset1);
console.log("chamado");
myChart.update();
}
function carregarDados() {
console.log("fui clicado!");
fetch(edtUrlDados.value)
.then(r => r.text())
.then(t => {
teste = t;
console.log(teste);
let dados = transformarDados(t);
atualizarTabela(dados);
atualizarGrafico(dados);
limparGrafico();
// atualizar o mapa
atualizarMapa(dados);
});
}
function atualizarMapa(dados) {
var map = Leaflet.map('map').setView([-22.5075743, -43.1785356], 13);
Leaflet.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([-22.5075743, -43.1785356]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
}
btnCarregarDados.addEventListener("click", carregarDados);

我的HTML代码

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
</head>
<body>
<h1>Preços dos Combistíveis</h1>
<h2>Fonte dos dados</h2>
<p>         
<input type="text" id="urlDados" value="http://pav.elfcorreia.com.br/combustiveis.csv">
<button>Verificar e carregar</button>
</p>
<h2>Dados</h2>
<!-- <div style="border: solid 1pt red; height: 150px; overflow: scroll;"> -->
<table style="display: block; border: solid 1pt black; height: 250px; overflow: scroll;">
<thead><tr></tr></thead>        
<tbody></tbody>
</table>
<!-- </div> -->

//JS CHART RECOMMENDATION STARTS HERE IN ID
<h2>Serie Histórica dos Preços</h2>
<p>Combustível: 
<input type="checkbox" id="gasolina" value="gasolina">
<label>gasolina</label>
<input type="checkbox" id="etanol">
<label>etanol</label>
</p>
<p>Valores: 
<input type="radio" name="valores" id="absoluto">
<label>preço absoluto</label>
<input type="radio" name="valores" id="variacao">
<label>variação em %</label>
</p>
<!-- <div style="width: 100%; height: 150px; border: solid 1pt black;"></div> -->
<div style="border: solid 1pt black;">
<canvas id="grafico" style="width: 100%; height: 250px;"></canvas>
</div>
<h2>Visualização no Mapa</h2>
<p>
data: 
<select>
<option>01/05/2021</option>
</select>
municipios: 
<select>
<option>Petrópolis</option>
</select>
</p>
<div id="map" style="width: 100%; height: 350px; border: solid 1pt black;"></div>
<script src="main.js"></script>
</body>
</html>

Answer 1

它是未定义的，因为你从未设置过它。你必须在数据集中配置label选项，而不是labels，如果我没记错的话，数据集也没有标签选项。

new Chart('canvasId', {
type: 'line'
data: {
labels: ['a','b'],
datasets: [{
data: [4,7],
label: 'text that appears in the legend that is undefined right now'
}]
},
options: {}
})