时间戳

首页 > 解决方案 > 具有多个数据的谷歌折线图

google-visualization - 具有多个数据的谷歌折线图

问题描述

以下用于生成谷歌折线图的代码在分配了 2 个值（日期和平均值）的情况下工作正常。当我添加更多数据（包括如下所示的众数和方差）时，它只显示原始数据（日期和平均值）。不显示其他数据。我在这里做错了什么？请。我还在学习谷歌图表。任何帮助将不胜感激。谢谢。

<?php

    $servername = "localhost";
    $username = "root";
    $password = ""; 
    $dbname = "mydb";  

    $con = new mysqli($servername, $username, $password, $dbname);

    if ($con->connect_error) {
        die("Connection failed: " . $con->connect_error);
    }
    else
    {
);
    }
    $query = "SELECT Date, Mean, Mode, Variance FROM datatb";  
    $aresult = $con->query($query);

?>

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Data</title>
    <script type="text/javascript" src="loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});

        google.charts.setOnLoadCallback(drawChart);
        function drawChart(){

            var data = new google.visualization.DataTable();
            var data = google.visualization.arrayToDataTable([

                ['Date','Mean','Mode','Variance'],
                <?php
                    while($row = mysqli_fetch_assoc($aresult)){
                        echo "['".$row["Date"]."', ".$row["Mean"].", ".$row["Mode"].", ".$row["Variance"]."],";
                    }
                ?>


               ]);


    var view = new google.visualization.DataView(data);
        view.setColumns([0, 1, {
        calc: 'stringify',
        sourceColumn: 1,
        type: 'string',
        role: 'annotation'

    }]);


            var options = {
                title: 'Data',
                hAxis : {textStyle : {fontSize: 8}},
                'tooltip' : { trigger: 'none'},
                enableInteractivity: false, 
                width: '100%',
                height: '700',
                chartArea:{
                left:10,
                top: 100,
                width: '100%',
                height: '450',
                },
                pointSize:4,
                vAxis: { textPosition: 'none', gridlines: { count: 10 }, baselineColor: 'gray' }, 
                annotations: { stemColor: 'white', textStyle: { fontSize: 11 } }, 
                legend: { position: 'bottom' }
                     };


               var chart = new google.visualization.LineChart(document.getElementById('curvechart')); 
               chart.draw(data, options); 

            chart.draw(view, options);  

        }

    </script>
</head>
<body>
     <div id="curvechart" style="width: 2500px; height: 600px"></div> 
</body>
</html>

白帽的建议：

<?php

    $servername = "localhost";
    $username = "root";
    $password = ""; 
    $dbname = "mydb";  

    $con = new mysqli($servername, $username, $password, $dbname);

    if ($con->connect_error) {
        die("Connection failed: " . $con->connect_error);
    }
    else
    {
);
    }
    $query = "SELECT Date, Mean, Mode, Variance FROM datatb";  
    $aresult = $con->query($query);

?>

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Data</title>
    <script type="text/javascript" src="loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});

        google.charts.setOnLoadCallback(drawChart);
        function drawChart(){

            var data = new google.visualization.DataTable();
            data.addColumn('number', 'Mode');
            data.addColumn('number', 'Variance');
            var data = google.visualization.arrayToDataTable([

                ['Date','Mean','Mode','Variance'],
                <?php
                    while($row = mysqli_fetch_assoc($aresult)){
                        echo "['".$row["Date"]."', ".$row["Mean"].", ".$row["Mode"].", ".$row["Variance"]."],";
                    }
                ?>


               ]);


    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
    calc: 'stringify',
    sourceColumn: 1,
    type: 'string',
    role: 'annotation'
}, 2, {
    calc: 'stringify',
    sourceColumn: 2,
    type: 'string',
    role: 'annotation'
}, 3, {
    calc: 'stringify',
    sourceColumn: 3,
    type: 'string',
    role: 'annotation'
}, ]);


            var options = {
                title: 'Data',
                hAxis : {textStyle : {fontSize: 8}},
                'tooltip' : { trigger: 'none'},
                enableInteractivity: false, 
                width: '100%',
                height: '700',
                chartArea:{
                left:10,
                top: 100,
                width: '100%',
                height: '450',
                },
                pointSize:4,
                vAxis: { textPosition: 'none', gridlines: { count: 10 }, baselineColor: 'gray' }, 
                annotations: { stemColor: 'white', textStyle: { fontSize: 11 } }, 
                legend: { position: 'bottom' }
                     };


               var chart = new google.visualization.LineChart(document.getElementById('curvechart')); 
               chart.draw(data, options); 

            chart.draw(view, options);  

        }

    </script>
</head>
<body>
     <div id="curvechart" style="width: 2500px; height: 600px"></div> 
</body>
</html>

标签： google-visualization

解决方案

更正echo语句后，只需在视图中添加列... 

var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
    calc: 'stringify',
    sourceColumn: 1,
    type: 'string',
    role: 'annotation'
}, 2, 3]);

或者，如果您希望所有人都有注释... 

var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
    calc: 'stringify',
    sourceColumn: 1,
    type: 'string',
    role: 'annotation'
}, 2, {
    calc: 'stringify',
    sourceColumn: 2,
    type: 'string',
    role: 'annotation'
}, 3, {
    calc: 'stringify',
    sourceColumn: 3,
    type: 'string',
    role: 'annotation'
}, ]);

推荐阅读