用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(){ }); 在要在PHP中生成的js文件中，因此我可以創建更新的圖表？ 如果可以，我該怎么做？

Answer 1

使用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文件

演示

Answer 2

是的，它可以完成..我將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;
    }

希望這有助於指明方向...