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

【问题标题】：Display annotation text in google charts for max and min values only仅在谷歌图表中显示最大值和最小值的注释文本
【发布时间】：2015-08-27 03:54:26
【问题描述】：

如何在谷歌图表中仅显示最大值和最小值的注释文本。我不想显示和注释其他值的消息，请参阅 info 的图像

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

【问题讨论】：

google chart documentation 提到使用过滤器。您是否尝试过启用过滤器，然后将其默认设置为仅最小值和最大值？

标签： asp.net google-visualization

【解决方案1】：

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

//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>

【讨论】：