0

Web サイトで 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 のいくつかの異なる配列の 1 つを呼び出すことができる PHP または jQuery 関数はありますか? そのコーディングはどのように見えるでしょうか？私はPHPとjQueryに少し慣れていないので、助けていただければ幸いです。

ご覧になりたい場合は、デモがGitHubにアップされています。ありがとう！

4

2 に答える 2

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

地域による切り替え方法の1つ

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

?>
于 2014-08-28T02:09:22.170 に答える