dongyu5104
2014-08-27 23:50
浏览 580
已采纳

ChartJS中的动态数据

I'm using ChartJS and JQVMaps in a website to create an interactive world map that displays info graphics when a user clicks on a region. The ChartJS plugin allows you to assign the chart's data values as an array like so:

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

For my project, I will need to generate these data values dynamically based on what region the user clicked. The final site will be through WordPress. Is it possible to feed the chart's build script

new Chart(pie).Pie(pieData);

a PHP or jQuery function that could call one of several different arrays in pieData? What might that coding look like? I'm somewhat new to PHP and jQuery so any help is greatly appreciated.

The demo is up on GitHub if you want to take a look. Thanks!

图片转代码服务由CSDN问答提供 功能建议

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

  var pieData = [
 {
 value:20,
 color:“#  878BB6“
},
 {
值:40,
颜色:”#4ACAB4“
},
 {
值:10,
颜色:”#FF8153“
},
  {
值:30,
颜色:“#FFEA88”
} 
]; 
   
 
 

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

 新图表(饼图).Pie(pieData); 
   
 
 

一个PHP或jQuery函数,可以调用pieData中的几个不同数组之一? 那个编码可能是什么样的? 我对PHP和jQuery有点新意,所以非常感谢任何帮助。

演示 GitHub 上有用,如果你想看看。 谢谢!

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dongluan1901 2014-08-28 02:09
    已采纳

    You can use an AJAX request to get the data from the server. Below is an example using PHP to build out data. Although you would need to make it conditional based on region.

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

    One method of switching based on region

    <?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);
    
    ?>
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • duanmen8491 2017-07-17 13:45

    Yes, it's quite easy. I am using bootstrap adminlte and want to show the donut chart.

    The HTML Code is given below :

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

    Script File :

        /*
         * 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,
                });
            }
        });
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题