Javascript 使用php和mysql的条形图_Javascript_Php_Mysql_Arrays_Bar Chart

Javascript 使用php和mysql的条形图

javascript php mysql arrays

Javascript 使用php和mysql的条形图,javascript,php,mysql,arrays,bar-chart,Javascript,Php,Mysql,Arrays,Bar Chart,来自MySql数据的需求条形图，我有静态条形图的工作代码，代码如下--> 如何从这些数据创建条形图？或者有什么建议吗？使用海图文件条形图的例子。希望对你有所帮助 <!doctype html> <html> <head> <title>Bar Chart</title> <script src="Chart.js"></script> <meta

来自MySql数据的需求条形图，我有静态条形图的工作代码，代码如下-->

如何从这些数据创建条形图？或者有什么建议吗？

使用
海图文件

条形图的例子。希望对你有所帮助

<!doctype html>
<html>
    <head>
        <title>Bar Chart</title>
        <script src="Chart.js"></script>
        <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
        <style>
            canvas{
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" height="450" width="600"></canvas>
<?php 
$array=array
(
    '0' => array
        (
            'product' => 'abc',
            'total' => 21
        ),
    '1' => array
        (
            'product' => 'xyz',
            'total' => 1
        ),
    '2' => array
        (
            'product' => 'pqr',
            'total' => 13
        )
);

?>


<script>
        var lab=[];
        var data=[];
        <?php 
        foreach($array as $tem)
        {

            ?>

            lab.push('<?php echo $tem['product']; ?>');
            data.push('<?php echo $tem['total']; ?>');
        <?php }

        ?>

        var barChartData = {
            labels : lab,
            datasets : [
                {
                    fillColor : "rgba(220,220,220,0.5)",
                    strokeColor : "rgba(220,220,220,1)",
                    data : data
                },

            ]

        }

    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);

    </script>
    </body>
</html>


条形图
帆布{
}
var-lab=[]；
var数据=[]；
实验室推送（“”）；
数据推送（“”）；
var barChartData={
标签：实验室，
数据集：[
{
填充颜色：“rgba（220220,0.5）”，
strokeColor:“rgba（2201）”，
数据：数据
},
]
}
var myLine=新图表（document.getElementById（“canvas”）.getContext（“2d”））.Bar（barChartData）；

$results=“数据库中的数据”；
$ticks=array（）；
foreach（$results作为$result）{
$data[0]=$result['product']；
$data[1]=$result['total']；
$ticks[]=$data；
}
变量刻度=

你想用什么来绘图？@Shahar在X轴产品名称和y轴总计上显示一个示例，说明如何在JavaScript示例中使用PHP数组。@Shahar这是我想知道的，我应该如何在脚本上面添加这个数组我的意思是使用那个特定的示例，并展示如果您手动添加它会是什么样子database@itsoftware等等，我将为你创建you@itsoftware现在检查这正在工作，但是您编写的数组我将以$results格式获取此数组然后我要做foreach（$results as$result）如何在数组中实现你提到了它的static是的，你可以更改数组名称，然后首先使用查询从数据库中获取数据。并使用带有loop的结果数组我已经尝试了你的代码，但没有得到任何输出，它是空白的page@itsoftwareI updated var ticks=你试过了吗谢谢你的回复我试过了但还是没有得到任何输出你能得到$results的数据是的我得到$results的数据当我做pr（$results）时我得到了数组正如我在上面问题中提到的你可以看到数组

Array
(
    [0] => Array
        (
            [product] => abc
            [total] => 21
        )
    [1] => Array
        (
            [product] => xyz
            [total] => 1
        )
    [2] => Array
        (
            [product] => pqr
            [total] => 13
        )
)

<!doctype html>
<html>
    <head>
        <title>Bar Chart</title>
        <script src="Chart.js"></script>
        <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">
        <style>
            canvas{
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" height="450" width="600"></canvas>
<?php 
$array=array
(
    '0' => array
        (
            'product' => 'abc',
            'total' => 21
        ),
    '1' => array
        (
            'product' => 'xyz',
            'total' => 1
        ),
    '2' => array
        (
            'product' => 'pqr',
            'total' => 13
        )
);

?>


<script>
        var lab=[];
        var data=[];
        <?php 
        foreach($array as $tem)
        {

            ?>

            lab.push('<?php echo $tem['product']; ?>');
            data.push('<?php echo $tem['total']; ?>');
        <?php }

        ?>

        var barChartData = {
            labels : lab,
            datasets : [
                {
                    fillColor : "rgba(220,220,220,0.5)",
                    strokeColor : "rgba(220,220,220,1)",
                    data : data
                },

            ]

        }

    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Bar(barChartData);

    </script>
    </body>
</html>

 $results = "data From the DB";

  $ticks = array();

  foreach($results as $result){

      $data[0] = $result['product'];

      $data[1] = $result['total'];

      $ticks[] = $data;

    }

    <script>
    var ticks =  <?php print_R($ticks); ?> 
    </script>