使用php值创建雷达图

Question

我得到了这个雷达图的例子，要放在我的php应用程序中。

http://codepen.io/Synvox/pen/iHbxE/

值是否可能

 "JavaScript": 4.1,
      "Node.js": 3.5,
      "jQuery": 4,
      "PHP": 3,
      "C++": 2.5,
      "Problem Solving": 3.5,
      "DHTML": 4

在$(function(){ });中的一个js文件中生成，以便我可以创建一个更新的图表？？如果是的话，我该怎么做？

Answer 1

可以。。我在图形中使用D3.js，下面是我在PHP中使用的函数调用的副本，用于获取数据并传递回javascript。。。

1） 示例折线图

function makeLineChart($array,$reportCurrency,$rate,$costpVM,$costpGB) {
        if ($reportCurrency !== "GBP") {
            $costperVM = $costpVM * $rate;
            $costperGB = $costpGB * $rate;
        } else {
            $costperVM = $costpVM;
            $costperGB = $costpGB;
        }
        $lineString .= "<div id='lineContainer'><canvas id='totalCostLine' width='650' height='300'></canvas>";
        $lineString .= "</div><div id='vmCosts'>Average Monthly Cost per Small VM per month<h2>$reportCurrency $costperVM</h2>Average Monthly Cost per Gigabyte per month<br/><h2>$reportCurrency $costperGB</h2></div>";
        $lineString .= "<script type='text/javascript'>";
        $lineString .= "var totalCostLine = document.getElementById('totalCostLine').getContext('2d');";
        $lineString .= "var data = { labels : [";
        foreach ($array as $key=>$value) {
            $lineString .= "'".$key."',";
        }
        $lineString = rtrim($lineString, ',');
        $lineString .= "], datasets : [{ fillColor: 'rgba(243,168,62,1)',
        strokeColor : 'rgba(220,220,220,1)',
        pointColor : 'rgba(220,220,220,1)',
        pointStrokeColor : '#fff', data : [";
        foreach ($array as $key=>$value) {
            if ($reportCurrency != "GBP") {
                $LineNumber = number_format(($value*$rate),2,'.','');
            } else {
                $LineNumber = number_format(($value),2,'.','');
            }
            $lineString .= "'".$LineNumber."',";
        }
        $lineString = rtrim($lineString, ',');
        $lineString .= "]}]};";
        $lineString .= "var lineOptions = {scaleLineColor : 'rgba(0,0,0,1)' };";
        $lineString .= "new Chart(totalCostLine).Line(data,lineOptions);";
        $lineString .= "</script>";
        return $lineString;
    }

2） 示例甜甜圈饼图

function makeDoughnut($array,$reportCurrency,$rate) {
        $pieColors = array("#FF0000","#FF6699","#CC66FF","#0066FF","#00CC99","#33CC33","#FFFF00","#FF6600","#FF9900","#FF3399");
        $pieString = "<div class='blockGap'></div>";
        $pieString .= "<div id='pieContainer'><canvas id='technology' width='300' height='300'></canvas>";
        $pieString .= "<div id='pieLegend'>";
        $count=0;
        $result = count($array);
        for($i=1;$i<$result;$i+=2) {
            if ($reportCurrency != "GBP") {
                $figure = number_format($array[$i-1]*$rate,2);
            } else {
                $figure = number_format($array[$i-1],2);
            }
            $pieString .= "<div id='legendBox' style='background-color:".$pieColors[$count]."'></div><div id='legendText'>&nbsp".$array[$i].":&nbsp <strong>".$reportCurrency."</strong>&nbsp".$figure."</div>";
            $count++;
        }
        $pieString .= "</div></div>";
        $pieString .= "<script type='text/javascript'>";
        $pieString .= "var technology = document.getElementById('technology').getContext('2d');";
        $pieString .= "var data = [";
        $count=0;
        for($i=0;$i<$result;$i+=2) {
            $pieString .= "{ value: ".$array[$i].", color: '".$pieColors[$count]."' },";
            $count++;
        }
        $pieString = rtrim($pieString, ',');
        $pieString .= "]; var pieOptions = { segmentShowStroke: true, segmentStrokeWidth : 1, segmentStrokeColor : '#fcf7ec', animateScale: true }; new Chart(technology).Doughnut(data,pieOptions);";
        $pieString .= "</script>";
        return $pieString;
    }

跳跃这有助于指明方向。。。

Answer 2

使用AJAX将数据获取为JSON非常简单，然后在收到数据后初始化插件。

$(function(){
    $.getJSON('path/to/server/', function(response) {
        $('#chart').radarChart({
          size: [500, 400],
          step: 1,
          title: "My Skills",
          values: response,
          showAxisLabels: true
        });
      });
 });

我的演示使用了一个静态json文件。只需创建一个返回json_encoded数据的php文件

DEMO