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

PHP或jQuery函數可以調用pieData中的幾個不同的數組之一？什麼編碼看起來像？我對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

的方法是，它很容易。我正在使用引導管理員並希望顯示圓環圖。

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

腳本文件：

的HTML代碼下面給出

/* 
    * 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, 
      }); 
     } 
    });