Estoy preparando una funcion en la que necesito crear elementos (array, canvas, chart.js) con nombre variable; o sea, que se crea segun el contenido de una variable. ¿como puedo obtener los distintos nombres de elementos (con nombre variable)?
El codigo Javascript es
var ano = "<?php echo $ano;?>"
var ano_ant = "<?php echo $ano_ant;?>"
var ctx_gp001 = document.getElementById("graficorut001");
var grafico_contrut = new Chart(ctx_gp001, {
type: 'line',
data: {
labels : <?=json_encode(array_values($meses_graph));?>,
datasets: [{
type: 'line',
label: ano,
data :<?=json_encode(array_values($datos_graph001));?>,
backgroundColor: ['rgba(255, 99, 132, 0.2)'],
borderColor: ['rgba(255,99,132,1)'],
hoverBackgroundColor: ['rgba(255,99,132,0.4)'],
borderWidth: 1
}, {
label: ano_ant,
type: 'line',
data: <?=json_encode(array_values($datos_graph_old001));?>,
fill: false,
borderColor: '#71B37C',
backgroundColor: '#71B37C',
pointBorderColor: '#71B37C',
pointBackgroundColor: '#71B37C',
pointHoverBackgroundColor: '#71B37C',
pointHoverBorderColor: '#71B37C'
}]
},
options: {
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
<?php
echo "<div align='center'><canvas id='graficorut".$cod."' name='graficorut".$cod."' width='280vw'
?>
Lo que necesito es sustituir todo lo que tenga 001
por el valor que viene de la variable $cod
. En este caso ctx_gp001
, graficorut001
y $datos_grpah001
.
Lo que quiero evitar es crear el mismo codigo javascript para los 10 graficos que tengo que crear en la misma pagina.
var ctx_gp002 = document.getElementById("graficorut002");
var grafico_contrut = new Chart(ctx_gp002, {
type: 'line',
data: {
labels : <?=json_encode(array_values($meses_graph));?>,
datasets: [{
type: 'line',
label: ano,
data :<?=json_encode(array_values($datos_graph002));?>,
backgroundColor: ['rgba(255, 99, 132, 0.2)'],
borderColor: ['rgba(255,99,132,1)'],
hoverBackgroundColor: ['rgba(255,99,132,0.4)'],
borderWidth: 1
}, {
label: ano_ant,
type: 'line',
data: <?=json_encode(array_values($datos_graph_old002));?>,
fill: false,
borderColor: '#71B37C',
backgroundColor: '#71B37C',
pointBorderColor: '#71B37C',
pointBackgroundColor: '#71B37C',
pointHoverBackgroundColor: '#71B37C',
pointHoverBorderColor: '#71B37C'
}]
},
options: {
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});