chartJs与MySQL和PHP

我正在尝试与chartJs进行在线聊天。chartJs与MySQL和PHP

我想使用PHP推MySQL数据到chartJs。

MySQL表

id | page_views | visitors | month | 
------------------------------------| 
1 | 200  | 20  | Jan | 
2 | 100  | 10  | Feb | 
3 | 500  | 30  | March | 
------------------------------------|

chartJs

var randomScalingFactor = function(){ return Math.round(Math.random()*100)}; 
     var lineChartData = { 
      labels : ["January","February","March","April","May","June","July"], 
      datasets : [ 
       { 
        label: "My First dataset", 
        fillColor : "rgba(220,220,220,0.2)", 
        strokeColor : "rgba(220,220,220,1)", 
        pointColor : "rgba(220,220,220,1)", 
        pointStrokeColor : "#fff", 
        pointHighlightFill : "#fff", 
        pointHighlightStroke : "rgba(220,220,220,1)", 
        data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] 
       }, 
       { 
        label: "My Second dataset", 
        fillColor : "rgba(151,187,205,0.2)", 
        strokeColor : "rgba(151,187,205,1)", 
        pointColor : "rgba(151,187,205,1)", 
        pointStrokeColor : "#fff", 
        pointHighlightFill : "#fff", 
        pointHighlightStroke : "rgba(151,187,205,1)", 
        data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] 
       } 
      ] 

     } 

    window.onload = function(){ 
     var ctx = document.getElementById("canvas").getContext("2d"); 
     window.myLine = new Chart(ctx).Line(lineChartData, { 
      responsive: true 
     }); 
    }

我想申请MySQL的循环这一点。

任何人都可以给我一个简单的例子如何做到这一点？

来源

2016-04-12 max

它是否通过Ajax和JSON获取数据的工作？ – st2erw2od

@ st2erw2od是的。谢谢。 – max

ChartJS以JSON格式获取数据。

您可以通过AJAX获取JSON数据。

var jsonData = $.ajax({ 
    url: 'http://yourdomain.com/yourfile.php', 
    dataType: 'json', 
}).done(function (results){

在调用PHP文件中，您可以编程您的逻辑和数据库访问。然后，您可以使用json_encode回显数据以JSON格式输出数组。

header('Content-Type: application/json'); 
echo json_encode($dataArray);

然后，您可以将数据添加到图表所示：

var myChart = new Chart(ctx).Line(jsonData);

来源

2016-04-12 12:54:14 st2erw2od

另外，您可以在服务器端使用[PHPChartJS]（https://github.com/halfpastfouram/PHPChartJS）。 –

-1

您可以使用http GET或POST请求加载数据，使用javascript完成。

因此，例如做一个GET请求路由到您的PHP方法。该方法执行SQL查询并返回结果（到javascript）。

来源

2016-04-12 12:30:32

chartJs与MySQL和PHP

回答

相关问题