Hallo dort Stack-Überlauf-Programmierer, ich habe eine Frage im Zusammenhang mit Daten aus meiner Datenbank mit Ajax und zeigen sie in Kreisdiagramm aus Chartjs-Bibliothek. Jetzt versuche ich dynamische Daten so zu machen, dass sie vom Format im Kreisformat akzeptiert werden.mit Ajax Populate dynamische Kreisdiagramm aus Chartjs
Hier ist meine Ajax und seine Antwort: (noch ist es nicht meine piegraph zeigen, ich weiß nicht, warum.)
function getpieclinic() {
$.ajax({
type: "POST",
url: siteurl+"patients_report/piedataclinic",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess_,
error: OnErrorCall_
});
function OnSuccess_(response) {
// alert("hi");
var aData = response.d;
var arr = [];
$.each(aData, function (inx, val) {
var obj = {};
obj.color = val.color;
obj.value = val.value;
obj.label = val.label;
arr.push(obj);
});
var ctx = $("#myChart").get(0).getContext("2d");
var myPieChart = new Chart(ctx).Pie(arr);
}
function OnErrorCall_(response) {}
}
die Antwort meiner Ajax ist diese:
[{"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"}]
jetzt Ich möchte ein dynamisches Format des Datenformats von piechart chartjs erstellen, um es anzeigen zu können. Dies ist das Standardformat aus dem Beispiel:
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);
ist dies eine Art von Hausaufgaben/Projekt? –
ja @ moáois, ein Systemprojekt in der Schule. –
@ moáois thak Sie für Ihre Antwort. Bitte hilf mir. Ich bin in diesem Code verwirrt: $ .each (aData, Funktion (inx, val) { var obj = {}; obj.color = val.color; obj.value = val.value; obj.label = val.label; arr.push (obj); }); –