Графики Google: линейный график + баллы?

У меня есть линейный график, который показывает изменение стоимости во времени. Он работает, но я думал, что было бы здорово, если бы я мог добавить points, который показывает подсказку при наведении. Что-то вроде этого: Но Я не могу использовать подсказку непосредственно на одной из этих точек.

var data = google.visualization.arrayToDataTable([
    ['time', 'value'],
    ['12:00',   1],
    ['13:00',   5],
    ['14:00',   8],
    ['15:00',   12],
    ['16:00',   11],
    ['17:00',   15],

]);

new google.visualization.LineChart(document.getElementById('visualization')).
  draw(data, {});

Ответ 1

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

Исходный код:

var data = google.visualization.arrayToDataTable([
    ['time', 'value'],
    ['12:00',   1],
    ['13:00',   5],
    ['14:00',   8],
    ['15:00',   12],
    ['16:00',   11],
    ['17:00',   15],

]);

new google.visualization.LineChart(document.getElementById('visualization')).
  draw(data, {});

Вам нужно добавить два столбца - один для отметки аннотации, один для текста аннотации. Предполагая, что вы хотите два комментария в 14:00 и 16:00 для примера:

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'time');
  data.addColumn('number', 'value');
  data.addColumn({type: 'string', role:'annotation'});
  data.addColumn({type: 'string', role:'annotationText'});
  data.addRows([
    ['12:00',   1, null, null],
    ['13:00',   5, null, null],
    ['14:00',   8, 'A', 'This is Point A'],
    ['15:00',   12, null, null],
    ['16:00',   11, 'B', 'This is Point B'],
    ['17:00',   15, null, null],
  ]);

  new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {});
}

Это результат:

Чтобы добавить asgallant solution для добавления точек в диаграмму, вы можете сделать следующее:

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'time');
  data.addColumn('number', 'value');
  data.addColumn('number', 'points');
  data.addColumn({type: 'string', role:'annotation'});
  data.addColumn({type: 'string', role:'annotationText'});
  data.addRows([
    ['12:00',   1, null, null, null],
    ['13:00',   5, null, null, null],
    ['14:00',   8, 8, 'A', 'This is Point A'],
    ['15:00',   12, null, null, null],
    ['16:00',   11, 11, 'B', 'This is Point B'],
    ['17:00',   15, null, null, null],
  ]);

  new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {
      series: {
        0: {
          // set any applicable options on the first series
        },
        1: {
          // set the options on the second series
          lineWidth: 0,
          pointSize: 5,
          visibleInLegend: false
        }
      }
    });
}

Вот результат:

Ответ 2

Если я правильно прочитал ваш вопрос, вы хотите, чтобы в каждой строке отображались точки, указывающие на каждую точку данных, и зависание над этими точками должно появляться всплывающей подсказкой. Если это то, что вам нужно, диаграмма уже делает обе эти вещи, вы просто не можете видеть точки, потому что по умолчанию они имеют размер 0. Установите параметр "pointSize" в вашей LineChart, чтобы увеличить точки:

new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {
        pointSize: 5
    });

Edit:

Чтобы подчеркнуть только некоторые из точек на диаграмме, вам нужно добавить новую серию данных, которая содержит только эти значения (вы можете либо добавить эту серию непосредственно в DataTable, либо создать ее на лету с помощью DataView, если вы может каким-то образом отличить точки, которые вы хотите подчеркнуть, от других). Затем вы хотите установить параметр диаграммы series, чтобы скрыть строку во второй серии, удалить вторую серию из легенды и увеличить ее точки (вы также можете установить ее цвет, если хотите совместить цвета), например это:

series: {
    0: {
        // set any applicable options on the first series
    },
    1: {
        // set the options on the second series
        lineWidth: 0,
        pointSize: 5,
        visibleInLegend: false
    }
}