来自 MYSQL php echo 的谷歌折线图数据

Question

我正在尝试使用 php echo 显示数据库中的数据 此代码显示一个图表，我正在尝试查看是否可以通过 echo 更改数据（将 350 值更改为其他值）。我在下面的示例代码中尝试了它，但它不起作用。有什么问题？

这一行有 php var raw_data = [['Website', , 73, 104, 129, 146, 176, 139, 149, 218, 194, 96, 253]，现在我还没有从 mysql 中提取数据一旦确定我可以使用 echo 操作数据，我打算稍后再做

<script>

        /*
         * This script is dedicated to building and refreshing the demo chart
         * Remove if not needed
         */

        // Demo chart
        var chartInit = false,
            drawVisitorsChart = function()
            {
                // Create our data table.
                var data = new google.visualization.DataTable();
                var raw_data = [['Website', <?php echo '350';?>, 73, 104, 129, 146, 176, 139, 149, 218, 194, 96, 253],
                                ['Shop', 82, 77, 98, 94, 105, 81, 104, 104, 92, 83, 107, 91],
                                ['Forum', 50, 39, 39, 41, 47, 49, 59, 59, 52, 64, 59, 51],
                                ['Others', 45, 35, 35, 39, 53, 76, 56, 59, 48, 40, 48, 21]];

                var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

                data.addColumn('string', 'Month');
                for (var i = 0; i < raw_data.length; ++i)
                {
                    data.addColumn('number', raw_data[i][0]);
                }

                data.addRows(months.length);

                for (var j = 0; j < months.length; ++j)
                {
                    data.setValue(j, 0, months[j]);
                }
                for (var i = 0; i < raw_data.length; ++i)
                {
                    for (var j = 1; j < raw_data[i].length; ++j)
                    {
                        data.setValue(j-1, i+1, raw_data[i][j]);
                    }
                }

                // Create and draw the visualization.
                // Learn more on configuration for the LineChart: http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html
                var div = $('#demo-chart'),
                    divWidth = div.width();
                new google.visualization.LineChart(div.get(0)).draw(data, {
                    title: 'Monthly unique visitors count',
                    width: divWidth,
                    height: $.template.mediaQuery.is('mobile') ? 180 : 265,
                    legend: 'right',
                    yAxis: {title: '(thousands)'},
                    backgroundColor: ($.template.ie7 || $.template.ie8) ? '#494C50' : 'transparent',    // IE8 and lower do not support transparency
                    legendTextStyle: { color: 'white' },
                    titleTextStyle: { color: 'white' },
                    hAxis: {
                        textStyle: { color: 'white' }
                    },
                    vAxis: {
                        textStyle: { color: 'white' },
                        baselineColor: '#666666'
                    },
                    chartArea: {
                        top: 35,
                        left: 30,
                        width: divWidth-40
                    },
                    legend: 'bottom'
                });

                // Message only when resizing
                if (chartInit)
                {
                    notify('Chart resized', 'The width change event has been triggered.', {
                        icon: 'img/demo/icon.png'
                    });
                }

                // Ready
                chartInit = true;
            };

        // Load the Visualization API and the piechart package.
        google.load('visualization', '1', {
            'packages': ['corechart']
        });

        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawVisitorsChart);

        // Watch for block resizing
        $('#demo-chart').widthchange(drawVisitorsChart);

        // Respond.js hook (media query polyfill)
        $(document).on('respond-ready', drawVisitorsChart);

    </script>

Answer 1

我不能确定，但​​我认为问题出在 javascript 代码的其他地方。测试时我遇到了几个错误，可能与$.template 相关~一旦删除/替换了图表。

该页面必须具有.php 扩展名才能解释 php 代码。在控制台中调试取决于您使用的浏览器 - 通常如果您右键单击页面并选择 inspect element 控制台将出现在底部 - 您看到的内容取决于浏览器，但当然 Firefox 和 Chrome 都有名为 @987654324 的选项卡@ - 观察并查找错误！

<!doctype html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>jQuery experiments with Google apis</title>
        <script src='https://www.google.com/jsapi'></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script>

             divWidth=600;
             divHeight=400;



             var chartInit = false,
                drawVisitorsChart = function(){
                    var data = new google.visualization.DataTable();
                    var raw_data = [['Website', <?php echo 428;?>, 73, 104, 129, 146, 176, 139, 149, 218, 194, 96, 253],
                                    ['Shop', 82, 77, 98, 94, 105, 81, 104, 104, 92, 83, 107, 91],
                                    ['Forum', 50, 39, 39, 41, 47, 49, 59, 59, 52, 64, 59, 51],
                                    ['Others', 45, 35, 35, 39, 53, 76, 56, 59, 48, 40, 48, 21]];

                    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

                    data.addColumn('string', 'Month');
                    for (var i = 0; i < raw_data.length; ++i){
                        data.addColumn('number', raw_data[i][0]);
                    }

                    data.addRows( months.length );

                    for (var j = 0; j < months.length; ++j){
                        data.setValue(j, 0, months[j]);
                    }
                    for (var i = 0; i < raw_data.length; ++i){
                        for (var j = 1; j < raw_data[i].length; ++j){
                            data.setValue(j-1, i+1, raw_data[i][j]);
                        }
                    }
                    /*
                        the $.template references all caused errors for me
                        so I removed them
                    */

                    var div = $('#demo-chart');
                    var divWidth = div.width();

                    new google.visualization.LineChart(div.get(0)).draw(data, {
                        title: 'Monthly unique visitors count',
                        width: divWidth,
                        height: divHeight,/*$.template.mediaQuery.is('mobile') ? 180 : 265, */
                        legend: 'right',
                        yAxis: {title: '(thousands)'},
                        backgroundColor: '#494C50',
                        legendTextStyle: { color: 'white' },
                        titleTextStyle: { color: 'white' },
                        hAxis: {
                            textStyle: { color: 'white' }
                        },
                        vAxis: {
                            textStyle: { color: 'white' },
                            baselineColor: '#666666'
                        },
                        chartArea: {
                            top: 35,
                            left: 30,
                            width: divWidth-40
                        },
                        legend: 'bottom'
                    });

                    if( chartInit ) {
                        notify('Chart resized', 'The width change event has been triggered.', {
                            icon: 'img/demo/icon.png'
                        });
                    }
                    chartInit = true;
                };
            google.load('visualization', '1', {
                'packages': ['corechart']
            });

            google.setOnLoadCallback(drawVisitorsChart);

            /* This caused errors for me */
           /* $('#demo-chart').widthchange( drawVisitorsChart );*/

            $(document).on('respond-ready', drawVisitorsChart);

        </script>
    </head>
    <body>
        <div id='demo-chart' style='width:600px;height:400px;'></div>
    </body>
</html>