在谷歌图表中仅显示最大值和最小值的注释文本

Question

如何仅在Google图表中显示最大值和最小值的注释文本。我不想为其他值显示和注释消息，请参阅图像以获取信息

注意：只想显示圆圈点的文字

Answer 1

可以使用google.visualization.DataView.setColumns函数实现，下面的示例显示了如何在Google图表中仅显示最大值和最小值的注释文本：

//add calculated column to print annotation only for min/max values
view.setColumns([0,1,
    {
        role: "annotation",
        type: "string",
        calc: function (dt, row) { 
            var range = dt.getColumnRange(1);
            var curVal = dt.getFormattedValue(row, 1);
            if(curVal == range.min || curVal == range.max)
                return curVal; 
            return null; 
        }
    }
]);

完整示例

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);

function drawChart() {
   
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Month'); // Implicit domain label col.
    data.addColumn('number', 'Sales'); // Implicit series 1 data col.
   
    data.addRows([
        ['April', 1000],
        ['May', 1170],
        ['June', 660],
        ['July', 1030]
    ]);

    var view = new google.visualization.DataView(data);

    var options = {
        title: 'Company Sales',
    };

    //add calculated column to print annotation only for min/max values
    view.setColumns([0,1,
        {
            role: "annotation",
            type: "string",
            calc: function (dt, row) { 
                var range = dt.getColumnRange(1);
                var curVal = dt.getFormattedValue(row, 1);
                if(curVal == range.min || curVal == range.max)
                    return curVal; 
                return null; 
            }
        }
    ]);

    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
    chart.draw(view, options);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="curve_chart" style="width: 900px; height: 500px"></div>