通过jquery ajax调用动态地使用数据填充Chart.js Donut Chart

时间:2013-12-17 13:17:00

标签: jquery ajax charts chart.js

我尝试在chart.js圆环图中从数据库中获取两个值。 不幸的是它不起作用。这些值从数据库正确提供到我的网页,但chart.js不使用它们。

我定义了两个全局变量:

var doughnutfail = 50;
var doughnutsuccess = 50;

我通过以下方式获取数据:

function getdynamicdata(){
        $.ajax({
          type: 'POST',
          url: 'fill-chart.php',
          async: false,
          success: function(result) {
            var returning= JSON.parse(result);
            $('#failwert').html(returning[0]+"%");
            $('#successwert').html(returning[1]+"%");
            $('#totalwert').html(returning[2]+" Tage");
            doughnutfail = returning[0];
            doughnutsuccess = returning[1];

            updateChartData(doughnutfail, doughnutsuccess);

          },
      });
    }

然后我创建了新的DataVar:

function  updateChartData(failin, successin){

           var fail=failin;
           var success=successin;

           var doughnutData = [
                {
                    value: fail,
                    color:"#1bbc9d"
                },
                {
                    value : success,
                    color : "#e84c3d"
                }
            ]; 

      }

图表由:

调用
var myDoughnut = new Chart(document.getElementById("myChart").getContext("2d")).Doughnut(doughnutData);

有什么想法吗?

0 个答案:

没有答案