javascript - 尝试将 php 变量传递给 js

Question

我有一个 $attr 数组，其中包含帖子中每个图表(highcharts)的 id 和页脚标题。当我 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>

并且工作正常。然后，当我在 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>