Php ChartJS中的动态数据

我在一个网站上使用ChartJS和JQVMaps创建一个交互式世界地图，当用户单击某个区域时，它会显示信息图形。ChartJS插件允许您将图表的数据值分配为数组，如下所示：

var pieData = [
        {
            value: 20,
            color:"#878BB6"
        },
        {
            value : 40,
            color : "#4ACAB4"
        },
        {
            value : 10,
            color : "#FF8153"
        },
        {
            value : 30,
            color : "#FFEA88"
        }
    ];

对于我的项目，我需要根据用户单击的区域动态生成这些数据值。最终的网站将通过WordPress。是否可以为图表的构建脚本提供数据

new Chart(pie).Pie(pieData);

可以调用pieData中几个不同数组之一的PHP或jQuery函数？这种编码可能是什么样子的？我对PHP和jQuery有些陌生，因此非常感谢您的帮助

---

如果你想看一看的话，这本书就在上面。谢谢

您可以使用AJAX请求从服务器获取数据。下面是一个使用PHP构建数据的示例。尽管您需要根据区域设置条件

onRegionClick: function(element, code, region) {
 $.ajax('/get_chart_data.php', {
  data: {region: region},
  dataType: 'json',
  success: function(response) {
    new Chart(pie).Doughnut(response.pieData, pieOptions);
  }
});

获取_chart_data.php

<?php

// Check which region was passed
//$_REQUEST['region']
// Based on region build chart data

$chartData = new stdClass();

$pieData = array();
$pie1= new stdClass();
$pie1->value = 20;
$pie1->color = '#878BB6';
$pieData[] = $pie1;

$pie2= new stdClass();
$pie2->value = 40;
$pie2->color = '#4ACAB4';
$pieData[] = $pie2;

$chartData->pieData = $pieData;
echo json_encode($chartData);
?>

一种基于区域的切换方法

<?php

$region1Pie = array(20, '#878BB6', 40, '#4ACAB4', 10, '#FF8153', 30, '#FFEA88');
$region2Pie = array(15, '#878BB6', 20, '#4ACAB4', 25, '#FF8153', 30, '#FFEA88');
$region3Pie = array(9, '#878BB6', 60, '#4ACAB4', 25, '#FF8153', 12, '#FFEA88');

$chartData = new stdClass();
$pieData = array();

// Swtich based on region
switch($_REQUEST['region']) {
  case 1:
    $pieArray = $region1Pie;
    break;
  case 2:
    $pieArray = $region2Pie;
    break;
  case 3:
    $pieArray = $region3Pie;
    break;
}

for($i=0; $i<count($pieArray); $i+=2) {
  $pie= new stdClass();
  $pie->value = $pieArray[$i];
  $pie->color = $pieArray[$i+1];
  $pieData[] = $pie;
}

$chartData->pieData = $pieData;
echo json_encode($chartData);

?>

---

是的，很简单。我正在使用bootstrap adminlte，希望显示圆环图

HTML代码如下所示：

 <div class="chart-responsive">
     <canvas id="myChart" height="400"></canvas>
 </div>

脚本文件：

    /*
     * Declaration of Arrays
     */
    var dataCount = new Array();
    var labelSet = new Array();
    var colorArray = new Array();
    var colorHoverArray = new Array();
    var footerArray = new Array();
    /*
     * Footer color array (To set the color dynamically)
     */
    footerArray.push('green', 'orange', 'blue', 'yellow', 'red','purple');
     /*
     * Label color Array
     */
    colorArray.push('#3c8dbc', '#f56954', '#FFCE56', '#f56954', '#d2d6de', '#00a65a', '#00c0ef', '#605ca8', '#ff851b');

    /*
     * On Hover color Array
     */
    colorHoverArray.push('#605ca8', '#ff851b', '#00c0ef', '#00a65a', '#72dbdb', '#f56954', '#FFCE56', '#3c8dbc', '#f56954');
    var backgroundArray = new Array();
    var hoverArray = new Array();
    var listCount = 0;
    /*
     * Ajax call to get the response
     */
    $.ajax({
        type: "GET",
        url: yourUrl',
        success: function (response) {
            $.each(response.list, function (index, value) {
                /*
                 * dynamically loading the data in the array to pass it on to the datasets and labels Option
                 * of the Donut Chart
                 */
                dataCount[index] = value.usersCount;
                labelSet[index] = value.statusName;
                listCount = response.list.length;
            });

            /*
             * Background & hover color of the area on donut chart
             */
            for (var item = 0; item < listCount; item++)
            {
                backgroundArray[item] = colorArray[item];
                hoverArray[item] = colorHoverArray[item];
            }
            /*
             * Main donut chart section
             */
            var ctx = document.getElementById("myChart");
            var ctx = document.getElementById("myChart").getContext("2d");
            var ctx = $("#myChart");
            var ctx = "myChart";
            var ctx = document.getElementById("myChart");
            var data = {
                labels: labelSet,
                datasets: [
                    {
                        data: dataCount,
                        backgroundColor: backgroundArray,
                        hoverBackgroundColor: hoverArray
                    }]
            };
            // And for a doughnut chart to render the data
            var myDoughnutChart = new Chart(ctx, {
                type: 'doughnut',
                data: data,
            });
        }
    });

/*
*数组声明
*/
var dataCount=新数组（）；
var labelSet=新数组（）；
var colorArray=新数组（）；
var colorHoverArray=新数组（）；
var footerArray=新数组（）；
/*
*页脚颜色数组（用于动态设置颜色）
*/
footerArray.push（'绿色'、'橙色'、'蓝色'、'黄色'、'红色'、'紫色'）；
/*
*标签颜色数组
*/
colorArray.push（“#3c8dbc”、“#f56954”、“#FFCE56”、“#f56954”、“#d2d6de”、“#00a65a”、“#00c0ef”、“#605ca8”、“#ff851b”）；
/*
*悬停彩色阵列
*/
colorHoverArray.push（'605ca8'、'ff851b'、'00c0ef'、'00a65a'、'72dbdb'、'f56954'、'FFCE56'、'3c8dbc'、'f56954'）；
var backgroundArray=新数组（）；
var hoverArray=新数组（）；
var-listCount=0；
/*
*Ajax调用以获取响应
*/
$.ajax({
键入：“获取”，
url:yourUrl'，
成功：功能（响应）{
$.each（response.list，函数（索引，值）{
/*
*动态加载数组中的数据以将其传递到“数据集和标签”选项
*油炸圈饼图
*/
dataCount[索引]=value.usersCount；
标签集[索引]=value.statusName；
listCount=response.list.length；
});
/*
*甜甜圈图表上区域的背景和悬停颜色
*/
对于（变量项=0；项

现在我只需要学习AJAX，哈哈。非常感谢你的提示，我一定会给你一个机会。你一定已经看过这个演示了才能得到甜甜圈（pieData，pieOptions）；代码，谢谢！如果我只想在一个油炸圈饼图上测试这一点，我真的需要onRegionClick代码的最后3行吗（在这里你设置了canvas和ctx变量并调用了一个新的图表）？根据你的演示，我认为你不需要这些。上面用var pie=document.getElementById（“pie”）.getContext（“2d”）初始化饼图；因此，您只需要以下内容。新图表（饼图）.Doughnut（response.pieData，pieOptions）；你的演示现在就是这样工作的，所以没有这些行就可以了。好的，谢谢！我在get_chart_data.php（$chartData=stdClass（）；行）的第7行遇到了一个解析错误。我需要对参数做些什么吗？嗯，我仍然在那一行得到一个解析错误。此外，我还为每个$pie#=new stdClass（）设置了一个PHP开关；要测试regionMap。听起来对吗？