jquery — создание диаграммы радара со значениями php

Question

jquery — создание диаграммы радара со значениями php

Я получил этот пример радиолокационной карты, чтобы поместить в мое приложение 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-файл, который будет создан в PHP, чтобы я мог создать обновленную диаграмму ?? Если так, как я мог это сделать?

0

charts jquery php

Решение

Другие решения

Довольно просто использовать AJAX для получения данных в формате JSON, а затем получить данные для инициализации плагина.

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

Моя демонстрация использует статический файл JSON. Просто создайте php-файл, который возвращает json_encoded данные

DEMO

1

Источник

Accepted Answer

Да, это может быть сделано .. Я использую 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;
}

Хоп это помогает указать направление …

1