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

大家。
我想要的是带有来自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中作为数据集数组工作的结果？

参考方案

尝试

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

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

如果我得到url('')，我该如何使用另一个URL - javascript

我是新手，正在写这篇文章，但是如果源上没有图像，那么我只有空白。有人可以告诉我，如果我正在获取背景图像，如何获取/images/no-image.jpg：url（）;这是我的代码：<div class="uk-clearfix uk-position-relative"> <div class="recipeb…

如何在没有for循环的情况下在Javascript中使用Django模板标签 - javascript

我想在JavaScript中使用模板变量：我的问题是在javascript代码中使用for循环，for循环之间的所有事情都会重复..但我不想要....下面粘贴了我的代码..有人可以告诉我更好的方法吗这..因为这看起来很丑..这是我的代码： {% block extra_javascript %} <script src="/static/js…

使用JS和PHP更改弹出窗口背景图像 - javascript

我有一个JS函数：function zoom(now) { document.getElementById("popup").style.display = "block"; document.getElementById("photos").style.backgroundImage = …

打印二维阵列 - javascript

我正在尝试打印子元素。在this example之后。怎么做？。$myarray = array("DO"=>array('IDEAS','BRANDS','CREATIVE','CAMPAIGNS'), "JOCKEY"=>a…

获取JavaScript值到C＃字符串 - javascript

是否可以在C＃中执行类似的操作？该值为“ 10/05/2014”string jsValue = javascript("$('#EstimatedStartDate').val()"); 参考方案您能否更详细地阐明您要做什么。看来您正在尝试从javascript（客户…

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

腾讯的同事天天给我安利让我看《三体》，说马化腾和雷军也在…