谷歌折线图 - 默认显示点的数据值答案

【问题标题】：Google Line Chart - Show Data Values on Points by default谷歌折线图 - 默认显示点的数据值
【发布时间】：2018-07-05 12:00:26
【问题描述】：

我想在折线图上显示数据值，即鼠标悬停时显示的数据值，我需要默认显示它们。我在这里尝试了解决方案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>

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

【问题讨论】：

标签： charts google-visualization

【解决方案1】：

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

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

请参阅以下工作 sn-p...

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>

【讨论】：

如果我的图表有 2 个垂直线，例如关注者与关注者，如何处理？
不确定我是否遵循您的问题，图表上有两条线？您可以在每个系列列之后添加一个注释列...
我让它与这个 view.setColumns( [0, 1, { calc: 'stringify', sourceColumn: 1, type: 'string', role: 'annotation' }, 2 , { calc: 'stringify', sourceColumn: 2, type: 'string', role: 'annotation' }] );