我正在用chart.js绘制一个表,遇到的问题是,当它们是多轴数据时,数据的分组方式不好,只显示一条线,我已经解决了这个问题。
现在发生在我身上的是,在值相等的情况下,它只显示第一个值,并没有很好地填充表格。
const pivotBy = (data, groupby) => {
let uniqueKeys = [];
uniqueKeys = data.reduce((uniqueValues, obj) => {
if (!uniqueValues.includes(obj[groupby])) {
uniqueValues.push(obj[groupby]);
}
return uniqueValues;
}, []);
return uniqueKeys;
};
let data = [{
"28": 483.00,
"29": 481.00,
"30": 486.00,
"fecha": 1621915200000
},
{
"28": 483.00,
"29": 481.00,
"30": 486.00,
"fecha": 1622001600000
},
{
"28": 483.00,
"29": 481.00,
"30": 486.00,
"fecha": 1622088000000
},
{
"28": 483.00,
"29": 481.00,
"30": 486.00,
"fecha": 1622174400000
},
];
let keyTemporales = []
data.forEach((obj) => {
keyTemporales = keyTemporales.concat(Object.keys(obj).filter((item) => keyTemporales.indexOf(item) < 0));
});
/* Esta sintaxis Object.keys(data[0])
* Se basa en un supuesto, todos los objetos del array son iguales del array son iguales. Es decir
* si en el primero viene dos códigos 18 y 51 no puede pasar que exista un objeto que tenga 18, 51 mas un numero distinto
*/
keyTemporales.forEach((key) => {
console.log("Preparamos a imprimir los valores con el key: " + key);
console.log(pivotBy(data, key));
});
第一次
这是预期的结果
更新,我添加了完整的代码与逻辑的图形
public generateChart(type) {
this.checkGrafico = '0';
if (type == null || type == undefined) {
type = 0;
} else {
this.grafico.destroy;
}
let labels = [];
const setDatos = [];
let label = [];
const pivotBy = (data, groupby) => {
let uniqueKeys = [];
uniqueKeys = data.reduce((uniqueValues, obj) => {
if (!uniqueValues.includes(obj[groupby])) {
uniqueValues.push(obj[groupby]);
}
return uniqueValues;
}, []);
return uniqueKeys;
};
let data = this.listadoResultado;
this.headerVariedades.forEach((item) => {
label = item.pro_des;
})
let keyTemporales = []
data.forEach((obj) => {
keyTemporales = keyTemporales.concat(Object.keys(obj).filter((item) => keyTemporales.indexOf(item) < 0));
});
keyTemporales.forEach((key) => {
console.log(key)
if (key === 'fecha') {
labels = pivotBy(data, key).map((value) => {
return this.helpersService.transformDate(value, 'dd/MM/yyyy');
});
// } else if (key === 'semana') {
// labels = pivotBy(data, key).map((value) => {
// return ("Semana " + value['semana']);
// });
} else if (key === 'mesTemporada') {
labels = pivotBy(data, key).map((value) => {
return value;
});
} else {
const color = this.helpersService.randomColor();
const obj = {
label: label,
fill: false,
backgroundColor: color,
borderColor: color,
data: pivotBy(data, key),
};
setDatos.push(obj);
}
});
this.datosGrafico = {
labels: labels,
datasets: setDatos,
};
this.titulos = this.titulosGrilla;
// Configuraciones correspondientes al gráfico.
this.opcionesGrafico = {
maintainAspectRatio: false,
legend: {
display: false,
},
elements: {
line: {
tension: 0,
},
},
scales: {
xAxes: [{
ticks: {
beginAtZero: true,
}
}],
},
};
1条答案
按热度按时间esbemjvw1#
您需要以
0
作为x
轴的起点,这就是它的实现方式:版本3.x
请尝试浏览Charts js的文档,网址为:此处