Многообразные линии / серии данных о файле JSON с Chart.js
Я увидел какие-то примеры в нескольких линиях в графике и сделал какие-то круговые графики и легких брусков файлов JSON в Chart.js.
В настоящее время, бруски и круговые легкие графики такие:
$(document).ready(function(){
var chartColors = {
red: 'rgba(255, 99, 132, 1)',
blue: 'rgba(54, 162, 235, 1)',
yellow: 'rgba(255, 205, 86, 1)',
green: 'rgba(75, 192, 192, 1)',
purple: 'rgba(153, 102, 255, 1)',
orange: 'rgba(255, 159, 64, 1)',
darkgrey: 'rgba(102, 102, 102, 1)',
maroon: 'rgba(200, 112, 91, 1)',
khaki: 'rgba(190, 204, 200, 1)'
};
$.ajax({
url:'../graficas/contAvance.php',
method: "GET",
success: function(response){
console.log(response);
data = JSON.parse(response);
var nombre = [];
var porcentaje = [];
var curso = [];
for (var i in data){
nombre.push(data[i].nombre+" "+data[i].ap_p);
porcentaje.push(data[i].porcentaje);
curso.push(data[i].curso_nombre);
}
var ctx2 = document.getElementById("chart2").getContext('2d');
var myChart2 = new Chart(ctx2,{
type: 'horizontalBar',
data:
{
labels: nombre,
datasets: [
{
label: 'Porcentaje %:',
backgroundColor:
[
chartColors.red,
chartColors.blue,
chartColors.yellow,
chartColors.green,
chartColors.purple,
chartColors.orange,
chartColors.darkgrey,
chartColors.maroon,
chartColors.khaki
],
borderWidth: 1,
data: porcentaje
}
]
},
options:{
responsive: true,
legend: {
display: false
},
scales: {
xAxes: [{
gridLines: {
display: false
}
}],
yAxes: [{
gridLines: {
display: false
},
ticks: {
beginAtZero:true,
}
}]
}
}
});
},
error: function() {
alert("Hay problemas al cargar la gráfica!");
}
});
});
Но я не могу представлять, как инициализировать или форматировать мои файлы JSON для нескольких линий. Я нуждаюсь в том, чтобы иметь несколько файлов JSON, один для каждой линии? Если это так: как он бы это загрузил в моем canvas?
Или я могу форматировать мой файл JSON таким образом что он может использовать только файл для нескольких линий? Я увидел этот пример: https://codepen.io/k3no/pen/pbYGVa, но я все еще не уверен от как получать JSON и несколько объединенных линий
Мои данные (JSON encode) такие и то, что он показал бы в графике, было бы именем студента больше курс и процентное содержание продвижения:
[{
"curso_id":"4",
"curso_nombre":"Test",
"nombre":"Estudiante",
"ap_p":"A_P",
"usuario_id":"2",
"total_temas":"7",
"temas_vistos":"3",
"porcentaje":"42.8571"},
{
"curso_id":"5",
"curso_nombre":"Excel",
"nombre":"Estudiante",
"ap_p":"A_P",
"usuario_id":"2",
"total_temas":"2",
"temas_vistos":"2",
"porcentaje":"100.0000"},
{
"curso_id":"4",
"curso_nombre":"Test",
"nombre":"Estudiante No. 2",
"ap_p":"AP",
"usuario_id":"3",
"total_temas":"7",
"temas_vistos":"6",
"porcentaje":"85.7143"}
]
Ты можешь загружать файл JSON (Посредством неудара в лунку file например) и однажды загруженный создавать регулярное выражение, чтобы отделять каждый lГ-nea файла. DespuГ©s делить каждый lГ-nea на 3 части ("parte1" ":" "parte3") и использовать parte1 и parte3 , чтобы создавать таблицу.
function crearTabla(contenidoJSON){
//Creamos un array por cada linea del fichero JS
var lineas=[];
//Creamos una expresion regular que nos divida cada linea deseada del fichero.
var patron = /".+":".+"/gmi;
//Añadimos cada coincidencia al array de lineas:
lineas = contenidoJSON.match(patron);
//Recorremos el array:
for(var i =0;i<lineas.length;i++){
//Creamos una expresion regular para seprar cada elemento del array en 3 partes por cada linea.
var patron1 = /(".+")(:)(".+")/;
var linea = lineas[i].match(patron1);
//Cada linea está formada por "elemtno" ":" "valor"
var primerElemento = linea[1];
var segundoElemento = linea[3];
console.log(primerElemento + segundoElemento);
//Una vez aqui podrias crear la tabla utilizando cada elemento.
}
Однажды в этой точке tendrГЎs отдельные элементы, и не надо иметь файл JSON из-за каждый lГ-nea, так как ты имеешь каждый lГ-nea в array, и потом отделенная в 3 частях, что podrГЎs использовать в твою целесообразность, чтобы создавать таблицу.
, выполнив фрагмент предыдущего кода, podrГ, - чтобы видеть из-за консоли вывод, serГ - во что-то похожее на следующее:
"curso_id""4"
"curso_nombre""Test"
"nombre""Estudiante"
"ap_p""A_P"
"usuario_id""2"
"total_temas""7"
"temas_vistos""3"
"porcentaje""42.8571"
"curso_id""5"
"curso_nombre""Excel"
"nombre""Estudiante"
"ap_p""A_P"
"usuario_id""2"
"total_temas""2"
"temas_vistos""2"
"porcentaje""100.0000"
"curso_id""4"
"curso_nombre""Test"
"nombre""Estudiante No.2"
"ap_p""AP"
"usuario_id""3"
"total_temas""7"
"temas_vistos""6"
"porcentaje""85.7143"
С каждым из этих strings podrГ-схвати создавать подмостки без необходимости иметь файл JSON из-за lГ-nea.
-
1Спасибо, intentaré делать это. – Enrique E. Molina 07.11.2019, 16:26
-
2Если ответ помог тебе, не забывай пометить ее с зеленым tick. @EnriqueE.Molina – Deivid_41 07.11.2019, 22:00