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

Max*_*Max 1 charts google-visualization

我想在折线图上显示数据值,即鼠标悬停时出现的数据值,我需要默认情况下全部显示。我在这里尝试了解决方案Google Charts API: Always show the Data Point Values in Graph

data.addColumn({type: 'number', role: 'annotation'});
Run Code Online (Sandbox Code Playgroud)

我将此添加到我的代码中(我不确定将它确切放在哪里)但它没有做任何更改。

这是我的代码的一部分:

<!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>
Run Code Online (Sandbox Code Playgroud)

我有两个值;周和订单。默认情况下,我只需要图表上显示的“订单”值。我怎样才能做到这一点?谢谢。

Whi*_*Hat 5

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

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

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

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
    calc: 'stringify',
    sourceColumn: 1,
    type: 'string',
    role: 'annotation'
}]);
Run Code Online (Sandbox Code Playgroud)
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
}
Run Code Online (Sandbox Code Playgroud)