динамические данные в 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

Да, это довольно легко. Я использую bootstrap adminlte и хочу показать диаграмму пончика.

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