Question

我正在为我们学校制作一个项目，我需要一个条形图。我决定使用Morris Js，因为它在我下载的Bootstrap主题中有一个很好的样本。我的问题是我不知道如何将数据库中的MySQL值导入我的JavaScript。

这是条形图的javascript代码：

    <script type="text/javascript">
    $(function() {
    Morris.Bar({
    element: 'morris-bar-chart',
    data: [{
        device: 'iPhone',
        geekbench: 136
    }, {
        device: 'iPhone 3G',
        geekbench: 137
    }, {
        device: 'iPhone 3GS',
        geekbench: 275
    }, {
        device: 'iPhone 4',
        geekbench: 380
    }, {
        device: 'iPhone 4S',
        geekbench: 655
    }, {
        device: 'iPhone 5',
        geekbench: 1571
    }],
    xkey: 'device',
    ykeys: ['geekbench'],
    labels: ['Geekbench'],
    barRatio: 0.4,
    xLabelAngle: 35,
    hideHover: 'auto',
    resize: true
 });
 });
 </script>

我是Morris JS的新手。请帮忙。这是我到目前为止所尝试的内容。

<script type="text/javascript">
             // Bar Chart

                             <?php
                            $query = mysql_query("select * from product") or die(mysql_error());
                            while ($row = mysql_fetch_array($query)) {
                                ?>
Morris.Bar({
    element: 'morris-bar-chart',
    data: [{
        device: <?php echo "'" . $row['product_name'] . "'" . ','; ?>
        geekbench: <?php echo "'" . $row['product_stock'] . "'" ; ?>
    }],
    xkey: 'device',
    ykeys: ['geekbench'],
    labels: ['Geekbench'],
    barRatio: 0.4,
    xLabelAngle: 35,
    hideHover: 'auto',
    resize: true
});
});
<?php }; ?>
    </script>

Answer 1

从数据库中检索值后，您需要将其从PHP打印到JavaScript代码。最常见的方法是：

<script>
var valueFromDatabase = <?php echo $value; ?> ;

请注意，在PHP页面投放之前，HTML会在服务器端运行，因此您在JavaScript内插入PHP for-loop将无法正常工作。事实上，我不认为你上面的内容应该运行，因为PHP语法没有意义。

如果要从PHP数据库检索中打印出每个值，最好在两种语言中使用数组。然后，您可以使用PHP's json_encode()

打印出阵列

var jArray= <?php echo json_encode($phpArray ); ?>;

另请注意，您需要将数据库检索结果移动到PHP数组中才能执行此操作。你还没有这样做过。您可以在此SO帖retrieve data from db and display it in table in php .. see this code whats wrong with it?中看到这样做的示例。

Answer 2

<script type="text/javascript">
    Morris.Bar({
        element: 'morris-bar-chart',
        data: [
        <?php
        $query = mysql_query("select * from product");
        while ($row = mysql_fetch_array($query))
        {?>
            {
            device: "<?php echo $row['product_name'];?>",
            geekbench: [<?php echo $row['product_stock'];?>]
            },
        <?}?>
        ],
        xkey: 'device',
        ykeys: ['geekbench'],
        labels: ['Geekbench'],
        barRatio: 0.4,
        xLabelAngle: 35,
        hideHover: 'auto',
        resize: true
    });
</script>

如何在JavaScript中插入MySQL值？

2 个答案: