Javascript 使用ajax从chartjs填充动态piechart

大家好，这里是堆栈溢出程序员，我有一个问题，关于使用ajax从数据库获取数据并在chartjs库的piechart中显示数据。现在，我正试图使动态数据在piechart格式中被格式所接受

这是我的ajax及其回应：（仍然没有显示我的图形，我不知道为什么）

my ajax的回应如下：

[{"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"}]

现在，我想制作一个piechart chartjs数据格式的动态格式，以便能够显示它。这是示例中的默认格式：

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

var pieChartCanvas=$（“#pieChart”）.get（0.getContext（“2d”）；
var pieChart=新图表（pieChartCanvas）；
变量数据=[
{
价值：700，
颜色：“f56954”，
亮点：“f56954”，
标签：“铬”
},
{
价值：500，
颜色：“00a65a”，
亮点：“00a65a”，
标签：“IE”
},
{
价值：400，
颜色：“f39c12”，
亮点：“f39c12”，
标签：“FireFox”
},
{
价值：600，
颜色：“00c0ef”，
亮点：“00c0ef”，
标签：“狩猎”
},
{
价值：300，
颜色：“3c8dbc”，
亮点：“3c8dbc”，
标签：“歌剧”
},
{
数值：100，
颜色：“d2d6de”，
亮点：“d2d6de”，
标签：“导航器”
}
];
变量选项={
//布尔-我们是否应该在每个线段上显示笔划
这是真的，
//字符串-每段笔划的颜色
segmentStrokeColor:#fff“，
//数字-每个线段笔划的宽度
分段行程宽度：2，
//数字-我们从中间剪下的图表百分比
percentageInnerCutout:50，//对于饼图，这是0
//Number-动画步数
动画步骤：100，
//字符串动画效果
动画化：“easeOutBounce”，
//布尔-是否设置圆环旋转的动画
动画片：对，
//布尔值-是否设置从中心缩放圆环的动画
动画缩放：错误，
//布尔值-是否使图表响应窗口大小调整
回答：是的，
//布尔值-响应时是否保持起始纵横比，如果设置为false，将占用整个容器
维护Aspectratio：是的，
//字符串-图例模板
legendTemplate:“
”
};
//创建饼图或双圆图
//您可以使用下面的方法在pie和douhnut之间切换。
pieChart.甜甜圈（PieData，pieOptions）；

您可以通过以下方式完成此任务

//仅用于演示目的
//在实际场景中使用response.d
var response=[{“诊所名称”：“诊所1”，“检查总数”：“10”}，{“诊所名称”：“诊所2”，“检查总数”：“20”}，{“诊所名称”：“诊所3”，“检查总数”：“30”}，{“诊所名称”：“诊所4”，“检查总数”：“40”}；//来自ajax请求的响应
成功（响应）；
函数OnSuccess（响应）{
var pieChartCanvas=$（“#pieChart”）.get（0.getContext（“2d”）；
var pieChart=新图表（pieChartCanvas）；
var PieData=[]；
//动态创建数据
响应。forEach（函数（e）{
var random_color='#'+Math.floor（Math.random（）*16777215）.toString（16）；
PieData.push({
值：e.已检查的总数，
颜色：随机颜色，
推荐理由：随机颜色，
标签：e.clinic_名称
});
});
变量选项={
//布尔-我们是否应该在每个线段上显示笔划
这是真的，
//字符串-每段笔划的颜色
segmentStrokeColor:#fff“，
//数字-每个线段笔划的宽度
分段行程宽度：2，
//数字-我们从中间剪下的图表百分比
percentageInnerCutout:0，//对于饼图，这是0
//Number-动画步数
动画步骤：100，
//字符串动画效果
动画化：“easeOutBounce”，
//布尔-是否设置圆环旋转的动画
动画片：对，
//布尔值-是否设置从中心缩放圆环的动画
动画缩放：错误，
//布尔值-是否使图表响应窗口大小调整
回答：是的，
//布尔值-响应时是否保持起始纵横比，如果设置为false，将占用整个容器
维护Aspectratio：是的，
//字符串-图例模板
legendTemplate:“
”
};
//创建饼图或双圆图
//您可以使用下面的方法在pie和douhnut之间切换。
pieChart.甜甜圈（PieData，pieOptions）；
}

这是一个家庭作业/项目吗？是的@moáois，学校的一个系统项目。@moáois谢谢你的回答。请帮帮我。我对这段代码感到困惑：$.each（aData，function（inx，val）{var obj={}；obj.color=val.color；obj.value=val.value；obj.label=val.label；arr.push（obj）；}）；嗯，哦。。你的回答正确吗？你能分享你发送ajax请求的实际站点url吗？我只使用localhost sir，响应在顶部sir。我查询中的响应看起来不错，但我的问题是，将响应转换为chartjs piechartwowww的格式。谢谢你，先生。谢谢你的回答。请稍候。。。我试试这个。而且还要追溯了解

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