Диаграмма области Google Charts API отображает только максимальные и минимальные значения в аннотации - PullRequest
Новая
       14

Диаграмма области Google Charts API отображает только максимальные и минимальные значения в аннотации

1 голос
/ 10 марта 2019

Я использую диаграмму области API Google Charts для отображения простой электронной таблицы 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 Ответ

1 голос
/ 11 марта 2019

Вы можете использовать метод таблицы данных -> 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;
    }
}]);
...