Положительная / отрицательная диаграмма в Google Visualization API - PullRequest
Новая
       2

Положительная / отрицательная диаграмма в Google Visualization API

3 голосов
/ 06 марта 2011

Мне нужно сгенерировать диаграмму, подобную этой:

positve/negative chart

В частности, я хочу показать как положительное, так и отрицательное значение за период времени (может бытьчасов, минут и т. д.) и отобразите его следующим образом.

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

Во-первых, вы знаете, как называется этот вид диаграммы, чтобы я мог найти документацию?Во-вторых, есть ли способ реализовать такую ​​диаграмму с помощью API визуализации Google?Если нет, то есть ли другое общее решение для построения диаграмм в Интернете, с помощью которого я могу добиться этого?

Спасибо за потраченное время.

Ответы [ 2 ]

12 голосов
/ 14 марта 2011

Это называется «столбчатая диаграмма с накоплением», и ее действительно можно создать с помощью API визуализации Google.

Просто используйте свойство isStacked (описано здесь; http://code.google.com/apis/visualization/documentation/gallery/barchart.html).

Вот некоторый пример кода (на основе примера гистограммы по умолчанию, предоставленного Google и обновленного, чтобы показать использование isStacked и некоторые примеры данных из вашего примера); 

function drawVisualization() {

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Month');
  data.addColumn('number');
  data.addColumn('number');

  data.addRows(12);

  data.setCell(0, 0, 'January');
  data.setCell(1, 0, 'February');
  data.setCell(2, 0, 'March');
  data.setCell(3, 0, 'April');
  data.setCell(4, 0, 'May');
  data.setCell(5, 0, 'June');
  data.setCell(6, 0, 'July');
  data.setCell(7, 0, 'August');
  data.setCell(8, 0, 'September');
  data.setCell(9, 0, 'October');
  data.setCell(10, 0, 'November');
  data.setCell(11, 0, 'December');

  data.setCell(0, 1, 19);
  data.setCell(1, 1, 18);
  data.setCell(2, 1, 20);
  data.setCell(3, 1, 19);
  data.setCell(4, 1, 18);
  data.setCell(5, 1, 20);
  data.setCell(6, 1, 19);
  data.setCell(7, 1, 18);
  data.setCell(8, 1, 20);
  data.setCell(9, 1, 19);
  data.setCell(10, 1, 18);
  data.setCell(11, 1, 20);

  data.setCell(0, 2, -12);
  data.setCell(1, 2, -13);
  data.setCell(2, 2, -11);
  data.setCell(3, 2, -12);
  data.setCell(4, 2, -13);
  data.setCell(5, 2, -11);
  data.setCell(6, 2, -12);
  data.setCell(7, 2, -13);
  data.setCell(8, 2, -11);
  data.setCell(9, 2, -12);
  data.setCell(10, 2, -13);
  data.setCell(11, 2, -11);
  data.setCell(0, 2, -12);
  data.setCell(1, 2, -13);
  data.setCell(2, 2, -11);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
      draw(data,
           {title:"S&P 500 Up/Down Performance Since 1980", 
            width:600, height:400,
            isStacked:"true",
            legend:"none" }
      );
}

И результаты ...

Stacked Bar Chart

0 голосов
/ 17 ноября 2017

Используйте ColumnChart вместо BarChart: 

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

https://jsfiddle.net/0rrar9oq/16

...