作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
请帮助我如何从我的数据库数据动态填充此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"}]
以下是要遵循的饼图示例中的数据:
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/
有人可以帮我理解为什么我的饼图百分比计算不正确吗?看截图: 根据我的计算,如 RHS 上所示,支出百分比应为 24.73%。传递给 Highcharts 的值如下:- 花费:204827099.36-
我正在制作圆环饼图。 我设置数据的颜色并获取钻取(它是保存外部切片的数据和配置的对象)切片的颜色为同一组颜色。我想设置要在向下钻取对象中使用的不同颜色数组。请参阅附图(外层切片有两种颜色:橙色和透明)
我是一名优秀的程序员,十分优秀!