通过调用另一个 php 脚本生成图表时出现问题

Question

我正在尝试使用 http://c3js.org/samples/chart_pie.html 库生成饼图。我可以使用静态 html 创建图表。像下面这样

<code>
  <!DOCTYPE html>
<!-- saved from url=(0038)http://c3js.org/samples/chart_pie.html -->
<html>
<head>

</head> 
<div class="container">


<h1 class="title">Pie Chart</h1>



<div class="chart">
<div id="chart" class="c3" style= "max-height: 280px; position: relative;">
</div>
</div>



</div>
<script src="./js2/d3-3.5.0.min-3b564392.js" type="text/javascript"></script>
<script src="./js2/c3.min-3c814909.js" type="text/javascript"></script>
<!--
<script src="./js2/chart_pie-bdaca3a4.js" type="text/javascript"></script>
-->
<script type="text/javascript">
    var chart = c3.generate({
    data: {
        // iris data from R
        columns: [
            ['data1', 30],
            ['data2', 120],
        ],
        type : 'pie',
        onclick: function (d, i) { console.log("onclick", d, i); },
        onmouseover: function (d, i) { console.log("onmouseover", d, i); },
        onmouseout: function (d, i) { console.log("onmouseout", d, i); }
    }
});


setTimeout(function () {
    chart.load({
        columns: [
            ["Series1", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
            ["series2", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
            ["series3", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
        ]
    });
}, 1500);

setTimeout(function () {
    chart.unload({
        ids: 'data1'
    });
    chart.unload({
        ids: 'data2'
    });
}, 2500);
</script>


</body></html>
</code>

现在，我将图表块拆分到另一个 php 文件中。我的意图是从该文件生成并填充图表的数据。但是现在图表不会被绘制。不知道为什么在拆分代码时会这样做。非常感谢任何帮助。

现在我的代码是这样的。

主要html文件

<!DOCTYPE html>
<!-- saved from url=(0038)http://c3js.org/samples/chart_pie.html -->
<html>
<head>
<script>
 function showUserAssignment(str)
     {

     if (str=="")
       {
       document.getElementById("compainsummaryReport").innerHTML="";
       return;
       }
    if (window.XMLHttpRequest)
       {// code for IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp=new XMLHttpRequest();
       }
     else
       {// code for IE6, IE5
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       }
     xmlhttp.onreadystatechange=function()
       {
       if (xmlhttp.readyState==4 && xmlhttp.status==200)
         {
         document.getElementById("compainsummaryReport").innerHTML=xmlhttp.responseText;
         }
       }
     xmlhttp.open("GET","generatechart.php?projectname="+str,true);
     xmlhttp.send();
     }
     </script>
</head> 
<body>
<div class="container">

<form action="index.htm#">
  <div class="form-body">
    <div class="form-group">
        <label class="control-label">Select a  CAMPAIGN</label>
        <select name="campaign" onchange="showUserAssignment(this.value)" data-placeholder="Choose a Campaign" class="chosen-select mb-15" tabindex="2">
          <option value="test">test</option>
          <option value="test2">test2</option>
        </select>
    </div>
  </div>
</form>

<h1 class="title">Pie Chart</h1>

<div class="row">
    <div id="compainsummaryReport"></div>
</div><!-- /.row -->
</div>



</body>
</html>

和generatechart.php文件如下

<div class="chart">
  <div id="chart" class="c3" style= "max-height: 280px; position: relative;"></div>
</div>

<script src="./js2/d3-3.5.0.min-3b564392.js" type="text/javascript"></script>
<script src="./js2/c3.min-3c814909.js" type="text/javascript"></script>
<!--
<script src="./js2/chart_pie-bdaca3a4.js" type="text/javascript"></script>
-->
<script type="text/javascript">
    var chart = c3.generate({
    data: {
        // iris data from R
        columns: [
            ['data1', 30],
            ['data2', 120],
        ],
        type : 'pie',
        onclick: function (d, i) { console.log("onclick", d, i); },
        onmouseover: function (d, i) { console.log("onmouseover", d, i); },
        onmouseout: function (d, i) { console.log("onmouseout", d, i); }
    }
});


setTimeout(function () {
    chart.load({
        columns: [
            ["Series1", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
            ["series2", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
            ["series3", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
        ]
    });
}, 1500);

setTimeout(function () {
    chart.unload({
        ids: 'data1'
    });
    chart.unload({
        ids: 'data2'
    });
}, 2500);
</script>

非常感谢任何帮助

Answer 1

我在您的代码中看不到您将数据从 php 加载到 javascript 的位置。

我认为处理此问题的最佳方法是创建一个 json，您的 php 脚本将 return。有关 PHP 中 JSON 编码的详细信息，请查看此 page。然后你可以很容易地加载它 d3.json(...).

success 回调内部的延迟只是为了让第一个数据显示得更长一些。

请参阅下面和此处的演示 jsFiddle。

 var chart = c3.generate({
     data: {
         // iris data from R
         columns: [
             ['data1', 30],
             ['data2', 120], ],
         type: 'pie',
         onclick: function (d, i) {
             console.log("onclick", d, i);
         },
         onmouseover: function (d, i) {
             console.log("onmouseover", d, i);
         },
         onmouseout: function (d, i) {
             console.log("onmouseout", d, i);
         }
     }
 });
             
 d3.json('http://www.mocky.io/v2/54e8ff18ea18fba50709d59b', function (error, data) {
     console.log(error, data);
     console.log('loaded json, now add to chart after a short delay');
     setTimeout(function () {
         chart.load(data);
     }, 1000);
 });
 /*
setTimeout(function () {
    chart.load({
        columns: [
            ["Series1", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
            ["series2", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
            ["series3", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
        ]
    });
}, 1500);

setTimeout(function () {
    chart.unload({
        ids: 'data1'
    });
    chart.unload({
        ids: 'data2'
    });
}, 2500);*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.9/c3.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.9/c3.js"></script>
<div class="chart">
    <div id="chart" class="c3" style="max-height: 280px; position: relative;"></div>
</div>

通过调用另一个 php 脚本生成图表时出现问题

Having issue with chart generation by calling another php script

javascript

ajax

charts