Добавление меток данных (аннотаций?) В Google Charts (API визуализаций), взятых из запроса - PullRequest
Новая
       123

Добавление меток данных (аннотаций?) В Google Charts (API визуализаций), взятых из запроса

0 голосов
/ 29 мая 2020

Я создаю линейную диаграмму, запрашивая данные, введенные в таблицу Google, и мне нужно добавить метки данных, то есть маленькие числа рядом с точками на диаграмме. Я нашел много документации о том, как это сделать с диаграммами, нарисованными из таблицы данных, введенной вручную, но не из запроса к таблице Google. Пожалуйста, помогите. 

google.charts.load('current', {'packages':['corechart', 'line']}); 
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
var query = new google.visualization.Query(
  'URL'
);
query.setQuery('SELECT A, B OFFSET 0'); //select specific cells from the table
query.send(handleQueryResponse);
}

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

var data = response.getDataTable();
var options = {
  title: '',
  height : 250,
  width : '100%',

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

1 Ответ

0 голосов
/ 02 июня 2020

правильно, нужно добавить аннотации .

это можно сделать с помощью роли столбца аннотации .

роль столбца аннотации должна следовать непосредственно за столбцом серии, который он представляет в таблице данных.

в этом случае, поскольку вы получаете данные из запроса,
мы можем использовать DataView для добавления аннотации с использованием вычисляемого столбца.

сначала мы создаем представление данных. 

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

затем мы используем метод setColumns,
для добавления индексов столбцов из запроса,
и наши вычисленные столбец для аннотации. 

  view.setColumns([0, 1, {
    calc: 'stringify',
    sourceColumn: 1,
    type: 'string',
    role: 'annotation'
  }]);

наконец, нам нужно использовать представление, чтобы нарисовать диаграмму. 

chart.draw(view, options);

см. Следующий фрагмент ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(drawChart);

function drawChart() {
  var query = new google.visualization.Query(
    'URL'
  );
  query.setQuery('SELECT A, B OFFSET 0'); //select specific cells from the table
  query.send(handleQueryResponse);
}

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

  var data = response.getDataTable();
  var options = {
    title: '',
    height : 250,
    width : '100%',
  };

  // create data view with calculated annotation column
  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, {
    calc: 'stringify',
    sourceColumn: 1,
    type: 'string',
    role: 'annotation'
  }]);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(view, options);  // <-- use view to draw the chart
}

Примечание: при использовании google.visualization.LineChart вам понадобится только пакет 'corechart'.

пакет 'line' предназначен для материала линейной диаграммы -> google.charts.Line

...