我在网站中使用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有些新意,所以非常感谢任何帮助。
答案 0 :(得分: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);
?>
答案 1 :(得分:0)
是的,这很容易。我正在使用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,
});
}
});