Fatal编程技术网
  • charts/
  • Google Charts API面积图在注释中仅显示最大值和最小值

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

charts google-visualization

Google Charts API面积图在注释中仅显示最大值和最小值,charts,google-visualization,Charts,Google Visualization,我正在使用GoogleCharts API面积图来显示一个简单的Google电子表格：第0列存储日期和第1列值。实际上，图表默认显示注释中的所有值。但我只想在注释中显示列1的最小值和最大值 我找不到解决问题的方法，也许你可以帮我修改源代码 谢谢Mags <html> <head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.gst

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

我找不到解决问题的方法，也许你可以帮我修改源代码

谢谢Mags

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


load（“可视化”、“1”、{packages:[“corechart”]}）；
函数初始化（）{
var opts={sendMethod:'auto'}；
var query=new google.visualization.query（'https://docs.google.com/spreadsheets/MYSPREADSHEET",选择),；
发送（handleQueryResponse）；
}
函数handleQueryResponse（响应）{
if（response.isError（））{
警报（'查询中的错误：'+response.getMessage（）+'+response.getDetailedMessage（））；
返回；
}
var data=response.getDataTable（）；
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1,1{
键入：“字符串”，
角色：'注释'，
资料来源专栏：1，
计算：“字符串化”
}]);
变量选项={
标题：“”，
curveType:'函数'，
图例：{位置：'无'}，
线宽：4，
背景颜色：“#2E4151”，
颜色：[“白色”]，
字体大小：“26”，
fontName:“打开SAN”，
动画：{
“启动”：没错，
持续时间：800，
放松：'无生气'，
},
哈克斯：{
网格线：{color:'透明'，计数：4}，
textStyle:{color:'#FFF'}
},
言辞：{
网格线：{颜色：'白色'，计数：5}，
视图窗口：{min:87，max:101}，
文本样式：{
颜色：“#FFF”，
尺寸：18
},      
},
趋势线：{
0: {
类型：'多项式'，
颜色：'黄色'，
线宽：5，
不透明度：0.7，
秀二：没错，
visibleInLegend：正确
}
}
};
var chart=new google.visualization.AreaChart（document.getElementById（'chart_div'））；
图表绘制（视图、选项）；
}
setOnLoadCallback（初始化）；
您可以使用数据表方法-->
getColumnRange（columnIndex）

这将返回一个具有列的最小值和最大值的对象

然后可以使用数据视图上的
calc
功能，
要确定该值是否与最小值或最大值匹配，
并返回注释的格式化值。
返回
null
如果不返回，请参阅以下代码段

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;
    }
}]);
工作完美！谢谢