如何在Chart.JS中使用PHP制作JSON

Question

大家。 我想要的是带有来自PHP数据的Bubble Chart（Chart.js）。 PHP执行python文件。 *实际上，执行复杂的算法，但是这里用test.py简化了。

的index.php

<?php

$pyfile = "python ./test.py";
exec($pyfile, $output, $rtn);
$outputJson = json_encode($output);
?>

test.py

import sys
if __name__=='__main__':

 print [{'data': [{'x':10 ,'y':10, 'r':30}],'backgroundColor':[ 'rgb(141,63,223)'],'label': ['test1']},
       {'data': [{'x':20 ,'y':20, 'r':50}],'backgroundColor':[ 'rgb(141,29,73)'],'label': ['test2']},
       {'data': [{'x':30 ,'y':30, 'r':70}],'backgroundColor':['rgb(16,230,73)'],'label': ['test3']}]

的index.php

<body>
<canvas id="my_chart">
Canvas not supported...
</canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"> 
</script>

我必须像这样将结果从php带到javascript。

<script>

var type = 'bubble';

  var data = {
    datasets: //I want to insert result from php here
    ]};

  var options = {

      title: {
        display: true,
        text: 'bubble-sample'
      },

      scales: {

          xAxes: [{
              ticks: {max: 50, min: 0,stepSize: 10}
          }],

          yAxes: [{
              ticks: {max: 50,min: 0,stepSize: 10}
          }]
      },

};
var ctx = document.getElementById('my_chart').getContext('2d');
var myChart = new Chart(ctx, {
    type: type,
    data: data,
    options: options
  });

最后，使用Chart.js ...

var type = 'bubble';

  var data = {
    datasets: [
        {
           "data": [{
               "x":40,
               "y":30,
               "r":30
           },],

           "backgroundColor":[ "rgb(141,63,223)" ],

           "label": ["test1n"]
        },
        {

            data: [{"x":20 ,"y":20, "r":50} ,],

            backgroundColor:[ "rgb(141,29,73)"],

            label: ["test2"]
        },
        {

            data: [{"x":30 ,"y":30, "r":70} ,],

            backgroundColor:["rgb(16,230,73)"],

            label: ["test3"]
        }
    ]};

  var options = {

      title: {
        display: true,
        text: 'bubble-sample'
      },

      scales: {

          xAxes: [{
              ticks: {max: 50, min: 0,stepSize: 10}
          }],

          yAxes: [{
              ticks: {max: 50,min: 0,stepSize: 10}
          }]
      },

};
var ctx = document.getElementById('my_chart').getContext('2d');
var myChart = new Chart(ctx, {
    type: type,
    data: data,
    options: options
  });

在这里，我发现了如何在JavaScript中使用php变量。

var outputjs = '<?php echo $outputJson; ?>'

但是，它只是一个字符串，因为它来自python文件中的“ print”。

如何使python脚本在Chart.js中作为数据集数组工作的结果？

Answer 1

尝试

 var outputjs = <?php echo $outputJson; ?>

（用'括起来使它成为一个字符串）