Lo primero que necesitamos es crear una clase PHP. Para hacerlo, agregamos un archivo PHP llamado "HighCharts.php", con el siguiente código:
<?php
/**
* Description of HighCharts
*
* @author gabriel.castillo
*/
class HighCharts{
public $categories;
public $data;
}
class HighChartsPie{
public $name;
public $colorByPoint;
public $data;
}
class Serie {
public $name;
public $color;
public $data;
}
class Data{
public $name;
public $y;
public $sliced;
public $selected;
}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TyroDeveloper</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: 'POST',
url: "highcharts-pastel.php",
dataType: "json",
contentType: 'application/json',
async: false,
success: function (result) {
var options = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
renderTo: 'pie-chart'
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true
},
showInLegend: true
}
},
series: [result]
};
var chart = new Highcharts.Chart(options);
}
});
});
</script>
<style>
body {
font-family: Verdana;
}
</style>
</head>
<body>
<form id="frmChart" runat="server">
<div>
<div id="pie-chart" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</div>
</form>
</body>
</html>
<?php
include("HighCharts.php");
$chart = new HighChartsPie();
$chart->name = "Tipo";
$chart->colorByPoint = true;
//Inicializar datos
$chart->data = array();
//Agregar 20 Fresas
$chart_column = new Data();
$chart_column->name = "Fresas";
$chart_column->y = 20;
$chart_column->color = "#FF0000";
array_push($chart->data, $chart_column); //col1
//Agregar 5 Manzanas
$chart_column = new Data();
$chart_column->name = "Manzanas";
$chart_column->y = 5;
$chart_column->color = "#00FF00";
$chart_column->sliced = true;
$chart_column->selected = true;
array_push($chart->data, $chart_column); //col1
echo json_encode($chart);
?>
No hay comentarios:
Publicar un comentario