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

2023-09-08 08:56:36 作者:爱睡懒觉的姑凉

我正在尝试将静态数据转换为使用数据库结果.我将使用 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.

请参考以下代码示例:

api.php

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

php操作mysql两个数据库中表的数据同步

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.

 
精彩推荐
图片推荐