Tengo la matriz $attr que contiene la identificación y el pie de página de cada gráfico (highcharts) en una publicación. Cuando imprimo_r la matriz, agrupa la identificación y el pie de página correctamente y en el orden correcto tal como están en la publicación. Por ejemplo, en la publicación actual en la que estoy trabajando, tengo 3 gráficos y esto es lo que hay dentro de $attr :
Array ( [chart] => 23 [footer_caption] => footer test ) Array ( [chart] => 22 [footer_caption] => another test ) Array ( [chart] => 24 [footer_caption] => And another test ) Estoy pasando $attr['footer_caption] a javascript así:
<script> var captionLabel = "<?php echo $attr['footer_caption']; ?>"; console.log(captionLabel); </script> Y está funcionando bien. Entonces el problema ocurre cuando uso captionLabel en el archivo te js. Intenté usar un bucle for pero sin suerte. Si i captionLabel en el archivo js, muestra el pie de página del último gráfico 3 veces. Este es highcharts.js donde estoy usando captionLabel :
Highcharts.setOptions({ credits: { enabled: false }, chart: { type: 'column', events: { load: function () { var label = this.renderer.label(captionLabel) .css({ width: '400px', fontSize: '9px' }) .attr({ 'r': 2, 'padding': 5 }) .add(); label.align(Highcharts.extend(label.getBBox(), { align: 'center', x: 0, // offset verticalAlign: 'bottom', y: 20 // offset }), null, 'spacingBox'); } }, marginBottom: 120 }, legend: { align: 'center', verticalAlign: 'bottom', y: -30 },Mi pregunta es ¿cómo puedo pasar la cadena footer_caption derecha a cada gráfico en este js? Porque en este momento cada etiqueta de pie de página obtiene el último valor. Los 3 gráficos tienen el pie de página "Y otra prueba" en esta publicación.
Usar json_encode()
<?php $labels = [ [ ['chart'] => 23, ['footer_caption'] => 'footer test 1' ],[ ['chart'] => 24, ['footer_caption'] => 'footer test 2' ],[ ['chart'] => 25, ['footer_caption'] => 'footer test 3 ' ] ]; ?> <script> var captionLabels = "<?php echo json_encode($labels); ?>"; console.log(captionLabels); var label; //access each one like this captionLabels.forEach(function(label) { label = this.renderer.label(label.footer_caption); //graph code. }); </script>captionLabel tiene que ser una matriz, de lo contrario, solo contendrá el último valor que se le asignó. También debe usar una matriz para todos los valores de $attr y luego usar json_encode al enviarlo a JavaScript.
<?php $attr = [ ['chart' => '23', 'footer_caption' => 'footer test'], ['chart' => '22', 'footer_caption' => 'another test'], ['chart' => '24', 'footer_caption' => 'And another test'] ]; ?> <script> var captionLabel = <?= json_encode($attr) ?>; </script>Creo que debería generar la matriz de texto footer_caption y enviarlo a javascript como una cadena JSON.
código PHP:
$array = new array(); foreach ($attr as $value) { array_push($array, $value['footer_caption']); } $captionLabel = json_encode($array);Código JS:
<script> var captionLabel = JSON.parse("<?php echo $captionLabel; ?>"); console.log(captionLabel); </script>