Chart.js - 使用 mysql 和 php 从数据库中获取数据

2022-01-22 00:00:00 php mysql chart.js

我正在尝试将静态数据转换为使用数据库结果.我将使用 MySQL 和 PHP.

I'm trying to convert the static data to using database results. I'll be using MySQL and PHP.

示例代码:

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

下面是我的 php/msql:

$result = mysql_query("SELECT COUNT(*) FROM customer WHERE month='january'") or die(mysql_error());
$row1 = mysql_fetch_array( $result );

$result = mysql_query("SELECT COUNT(*) FROM customer WHERE month='february'") or die(mysql_error());
$row2 = mysql_fetch_array( $result );

$result = mysql_query("SELECT COUNT(*) FROM customer WHERE month='march'") or die(mysql_error());
$row3 = mysql_fetch_array( $result );

我如何使用我的 MySQL 查询中的那些 count() 并将其实现到 chartjs 上的数据集?我也希望从我的 MySQL 查询中生成标签.我应该在 jQuery 代码中循环数据集吗?

How could I use those count() from my MySQL query and implement it to datasets on chartjs? I would also like the labels to be generated from my MySQL query too. Should I loop the datasets inside the jQuery code?

这是我正在使用的插件:http://www.chartjs.org/docs/#line-chart-introduction

This is the plugin that I'm using : http://www.chartjs.org/docs/#line-chart-introduction

推荐答案

请将你的 php 代码放到另一个名为 api.php 的文件中，并使用 $.ajax 来获取这些数据采用 JSON 格式.要将数据转换为 JSON 格式数据，您应该使用 json_encode() php 函数.

Please place your php code into another file called api.php and use $.ajax to get these data with JSON format. To convert data into JSON format data you should use json_encode() php function.

我已经设置了示例示例，您可以查看这里.

I have set sample example you can see here.

请参考以下代码示例:

  1. api.php

  1. api.php

$arrLabels = array("January","February","March","April","May","June","July");
$arrDatasets = array('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' => array('28', '48', '40', '19', '86', '27', '90'));

$arrReturn = array(array('labels' => $arrLabels, 'datasets' => $arrDatasets));

print (json_encode($arrReturn));

  • example.html

  • example.html

    $.ajax({
type: 'POST',
url: 'api.php',
success: function (data) {
lineChartData = data;//alert(JSON.stringify(data));
var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);

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

    • 请注意，您应该在 api.php 中传递 randomScalingFactor() 的值.

    Please note that you should pass value of randomScalingFactor() at api.php.

    如果您需要任何进一步的帮助，请查看并告诉我.

    Please check and let me know if you require any further help.

    相关文章