gpt4 book ai didi

javascript - 如何动态填充我的 ChartJS 饼图

转载 作者:行者123 更新时间:2023-11-28 04:46:40 26 4
gpt4 key购买 nike

请帮助我如何从我的数据库数据动态填充此chartjs饼图,以便用饼图显示它。我的意思是从我的数据库获取查询并将数据库给出的数据转换为与 Chartjs 格式的数据需求兼容。请帮助我。

我正在使用 ajax 从我的数据库获取值:

function getpieclinic() {
$.ajax({
url: siteurl+"patients_report/piedataclinic",
type: "GET",
dataType: "JSON",
success:function(response) {
alert(response);
}
});
}

下面的代码的值为 JSON OBJECT WITH THESE QUERY RESULT(响应值):

[{"clinic_name":"Clinic 1","total_checked_up":"4"},{"clinic_name":"Clinic 2","total_checked_up":"0"},{"clinic_name":"Clinic 3","total_checked_up":"0"},{"clinic_name":"Clinic 4","total_checked_up":"0"}]

enter image description here

以下是要遵循的饼图示例中的数据:

var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
var pieChart = new Chart(pieChartCanvas);
var PieData = [
{
value: 700,
color: "#f56954",
highlight: "#f56954",
label: "Chrome"
},
{
value: 500,
color: "#00a65a",
highlight: "#00a65a",
label: "IE"
},
{
value: 400,
color: "#f39c12",
highlight: "#f39c12",
label: "FireFox"
},
{
value: 600,
color: "#00c0ef",
highlight: "#00c0ef",
label: "Safari"
},
{
value: 300,
color: "#3c8dbc",
highlight: "#3c8dbc",
label: "Opera"
},
{
value: 100,
color: "#d2d6de",
highlight: "#d2d6de",
label: "Navigator"
}
];
var pieOptions = {
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke: true,
//String - The colour of each segment stroke
segmentStrokeColor: "#fff",
//Number - The width of each segment stroke
segmentStrokeWidth: 2,
//Number - The percentage of the chart that we cut out of the middle
percentageInnerCutout: 50, // This is 0 for Pie charts
//Number - Amount of animation steps
animationSteps: 100,
//String - Animation easing effect
animationEasing: "easeOutBounce",
//Boolean - Whether we animate the rotation of the Doughnut
animateRotate: true,
//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale: false,
//Boolean - whether to make the chart responsive to window resizing
responsive: true,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: true,
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
};
//Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
pieChart.Doughnut(PieData, pieOptions);

最佳答案

我认为您一直在为图表形式 JSON 创建 Piedata。这是解决方案:

您的 JSON 字符串:

$json = '[{"clinic_name":"Clinic 1","total_checked_up":"4"},{"clinic_name":"Clinic 2","total_checked_up":"0"},{"clinic_name":"Clinic 3","total_checked_up":"0"},{"clinic_name":"Clinic 4","total_checked_up":"0"}]';

首先将其转换为数组:

$array = json_decode($json);

声明空变量:

$string_array = '';

循环抛出数组:

foreach($array as $single_array){

$string_array[] = array(
'value'=>$single_array->total_checked_up,
'color'=>'#f56954',
'highlight'=>'#f56954',
'label'=>$single_array->clinic_name
);
}

再次将数组转换为 JSON 以获得您想要的 PieData:

var PieData  = json_encode($string_array);

这就是 PieData 数据的样子。

[
{
"value": "4",
"color": "#f56954",
"highlight": "#f56954",
"label": "Clinic 1"
},
{
"value": "0",
"color": "#f56954",
"highlight": "#f56954",
"label": "Clinic 2"
},
{
"value": "0",
"color": "#f56954",
"highlight": "#f56954",
"label": "Clinic 3"
},
{
"value": "0",
"color": "#f56954",
"highlight": "#f56954",
"label": "Clinic 4"
}
]

关于javascript - 如何动态填充我的 ChartJS 饼图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43303765/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com