API визуализации Google - Гистограмма с накоплением - Настраиваемая подсказка

Я пытался получить настраиваемую всплывающую подсказку для столбчатой ​​диаграммы с накоплением.

var data = new google.visualization.DataTable();
data.addColumn('string', 'Units');
data.addColumn('number', '1');
data.addColumn('number', '2');
data.addColumn('number', '3');
data.addColumn('number', '4');

_1 = 0.123
_2 = 0.23
_3 = 0.3
_4 = 0

data.addRow([_units, _1, _2, _3, _4,]);

var options = {
        isStacked: true,
        height: 150,
        chartArea: { height: 50 },
        legend: { position: 'top' },
};

bchart = new google.visualization.BarChart(bcontainer);
bchart.draw(data, options);

Тогда мой вопрос: как создать всплывающую подсказку для каждого: _1, _2, _3, _4?

Спасибо


google-visualization
person Community    schedule 10.01.2013    source источник

Ответы (1)


arrow_upward
16
arrow_downward

Это описано в документации Google в разделе Роли DataTable.

В документации гистограммы объясняется, какие роли доступны для этой диаграммы здесь

Что вам нужно сделать, так это добавить дополнительные столбцы к вашим данным с помощью добавленной {role: tooltip}, причем в этом столбце будет показано, что вы хотите, чтобы всплывающая подсказка говорила.

Например:

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Year');
  data.addColumn('number', 'Sales');
  data.addColumn({type: 'string', role: 'tooltip'});
  data.addColumn('number', 'Expenses');
  data.addColumn({type: 'string', role: 'tooltip'});
  data.addRows([
    ['2004', 1000, '1M$ sales in 2004', 400,  '$0.4M expenses in 2004'],
    ['2005', 1170, '1.17M$ sales in 2005', 460, '$0.46M expenses in 2005'],
    ['2006', 660,  '.66$ sales in 2006', 1120, '$1.12M expenses in 2006'],
    ['2007', 1030, '1.03M$ sales in 2007', 540, '$0.54M expenses in 2007']
  ]);

Окончательный код будет выглядеть так:

function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Year');
  data.addColumn('number', 'Sales');
  data.addColumn({type: 'string', role: 'tooltip'});
  data.addColumn('number', 'Expenses');
  data.addColumn({type: 'string', role: 'tooltip'});
  data.addRows([
    ['2004', 1000, '1M$ sales in 2004', 400,  '$0.4M expenses in 2004'],
    ['2005', 1170, '1.17M$ sales in 2005', 460, '$0.46M expenses in 2005'],
    ['2006', 660,  '.66$ sales in 2006', 1120, '$1.12M expenses in 2006'],
    ['2007', 1030, '1.03M$ sales in 2007', 540, '$0.54M expenses in 2007']
  ]);

  // Create and draw the visualization.
  new google.visualization.BarChart(document.getElementById('visualization')).
      draw(data,
           {title:"Yearly Coffee Consumption by Country",
            isStacked: true,
            width:600, height:400,
            vAxis: {title: "Year"},
            hAxis: {title: "Sales"}}
      );
}

См. Пример здесь.

person jmac    schedule 11.01.2013
comment
Вчера я потратил на это несколько часов, пытаясь понять это. Большое тебе спасибо. - person ; 11.01.2013