Google Charts API 面积图仅在注释中显示最大值和最小值

Posted

技术标签:

【中文标题】Google Charts API 面积图仅在注释中显示最大值和最小值【英文标题】：Google Charts API Area Chart display only max and min values in annotation 【发布时间】：2019-07-31 21:34:07 【问题描述】：

我正在使用 Google Charts API 面积图来显示一个简单的 Google 电子表格：第 0 列存储日期和第 1 列值。实际上，图表默认显示注释中的所有值。但我只想在注释中显示第 1 列的最小值和最大值。

我找不到我的问题的解决方案，也许你可以帮助我的源代码。

感谢杂志

<html>
  <head>

    <!--Load the AJAX API-->

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

   google.load("visualization", "1", packages:["corechart"]);

function initialize() 
        var opts = sendMethod: 'auto';

        var query = new google.visualization.Query('https://docs.google.com/spreadsheets/MYSPREADSHEET', opts);         

        query.send(handleQueryResponse);


function handleQueryResponse(response) 
      if (response.isError()) 
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
      

    var data = response.getDataTable();

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

    var options = 
        title: '',
        curveType: 'function',
        legend: position: 'none',
        lineWidth: 4,
        backgroundColor: '#2E4151',
        colors:['white'],
        fontSize: '26',
        fontName: 'Open Sans',
        animation:
            "startup": true,
            duration: 800,
            easing: 'inAndOut',
       ,
    hAxis: 
        gridlines: color: 'transparent', count: 4,
        textStyle: color: '#FFF'
        ,
    vAxis: 
        gridlines: color: 'white', count: 5,
        viewWindow: min: 87, max: 101,
        textStyle: 
            color: '#FFF',
            fontSize: 18
            ,      
        ,
    trendlines: 
    0: 
      type: 'polynomial',
      color: 'yellow',
      lineWidth: 5,
      opacity: 0.7,
      showR2: true,
      visibleInLegend: true
    
  
  ;

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(view, options);


      google.setOnLoadCallback(initialize);

    </script>

  </head>

  <body>

    <div id="chart_div" style="width:100%; height:100%"></div>

  </body>
</html>

【问题讨论】：

【参考方案1】：

可以使用数据表法 --> getColumnRange(columnIndex)

这将返回一个包含列的最小值和最大值的对象。

那么你可以在数据视图上使用calc函数， 确定该值是否与最小值或最大值匹配， 并返回注释的格式化值。 返回null 如果没有，看下面的sn-p... 

var data = response.getDataTable();
var range = data.getColumnRange(1);

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 
    type: 'string',
    role: 'annotation',
    sourceColumn: 1,
    calc: function (dt, row) 
        var value = dt.getValue(row, 1);
        if ((value === range.min) || (value === range.max)) 
            return dt.getFormattedValue(row, 1);
        
        return null;
    
]);

【讨论】：

完美运行！谢谢

以上是关于Google Charts API 面积图仅在注释中显示最大值和最小值的主要内容，如果未能解决你的问题，请参考以下文章

Matplotlib条形图仅在非零条形图处显示x-ticks

Google Charts API更改字体

Rails：尝试在开发模式下“非法”将 adv ruby​​（每个 + 迭代器）操作嵌入到 javascript（Google Charts API）中

如何在 Google 图表中设置注释线的样式？

Google 地理编码 API - 仅在一个国家/地区搜索

Google Maps API 仅在使用 AJAX 时抛出“Uncaught ReferenceError: google is not defined”