ChartJS 中的动态数据

Question

我在网站中使用 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 有点陌生，因此非常感谢任何帮助。

如果您想看一看，demo 就在GitHub 上。谢谢！

Answer 1

您可以使用 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);
  }
});

get_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);

?>

Answer 2

是的，这很容易。我正在使用 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,
            });
        }
    });