Question

我想在折线图上显示数据值，即在鼠标悬停时显示的数据值，我需要默认情况下全部显示它们。我在这里Google Charts API: Always show the Data Point Values in Graph

尝试了解决方案

data.addColumn({type: 'number', role: 'annotation'});

我将此添加到了我的代码中（我不确定确切的位置），但是它没有做任何更改。

这是我的代码的一部分：

<!DOCTYPE html>
<html>
<head>
    <title>Week/Orders</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([

                ['Week','Orders'],
                <?php
                    while($row = mysqli_fetch_assoc($aresult)){
                        echo "['".$row["Week"]."', ".$row["Orders"]."],";
                    }
                ?>

               ]);


            var options = {
                title: 'Week Vs Orders',
                'width':1700,
                'height':600,

                legend: { position: 'bottom' }
                     };

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

        }

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

我有两个值；周和订单。默认情况下，我只需要在图表上显示“订单”值即可。我怎样才能做到这一点？谢谢。

Answer 1

您可以使用DataView向图表添加注释

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

请参阅以下工作片段...

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart(){
    var data = google.visualization.arrayToDataTable([
        ['Week','Orders'],
        ['1', 5],
        ['2', 6],
        ['3', 4]
    ]);

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

    var options = {
        title: 'Week Vs Orders',
        width: 1700,
        height: 600,
        legend: {position: 'bottom'}
    };

    var chart = new google.visualization.LineChart(document.getElementById('curvechart'));

    chart.draw(view, options);  // <-- use data view
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curvechart"></div>

Google折线图-默认情况下显示点上的数据值

1 个答案: