Question

我有$attr数组，其中包含帖子中每个图表（highcharts）的id和footer标题。当我print_r数组时，它正确地按正确顺序对id和footer_caption进行分组，就像它们在帖子中一样。例如，在我当前的工作中，我有3个图表，这就是$attr里面的内容：

    Array
(
    [chart] => 23
    [footer_caption] => footer test
)

    Array
(
    [chart] => 22
    [footer_caption] => another test
)

    Array
(
    [chart] => 24
    [footer_caption] => And another test
)

我正在将$attr['footer_caption]传递给这样的javascript：

<script>
  var captionLabel = "<?php echo $attr['footer_caption']; ?>";
  console.log(captionLabel);
</script>

它的工作正常。然后当我在te js文件上使用captionLabel时会出现问题。我尝试使用for循环，但没有运气。如果我在js文件中的console.log captionLabel，它会显示最后一个图形的页脚标题3次。这是我使用captionLabel：

的highcharts.js

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
    },

我的问题是如何将正确的footer_caption字符串传递给此js中的每个图表？因为现在每个页脚标签都获得最后一个值。所有这3张图都在这篇文章中得到了“和另一个测试”的页脚标题。

Answer 1

使用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>

Answer 2

captionLabel必须是一个数组，否则只保留分配给它的最后一个值。您还应该为所有$attr值使用数组，然后在将其输出到JavaScript时使用json_encode。

<?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>

Answer 3

我认为您应该生成footer_caption文本数组并将其作为JSON字符串发送到javascript。

PHP代码：

$array = new array();
foreach ($attr as $value) {
    array_push($array, $value['footer_caption']);
}
$captionLabel = json_encode($array);

JS代码：

<script>
     var captionLabel = JSON.parse("<?php echo $captionLabel; ?>");
     console.log(captionLabel);
</script>

试图将php变量传递给js

3 个答案: