Google charts - изменение ориентации баров в гистограмме - PullRequest
Новая
       27

Google charts - изменение ориентации баров в гистограмме

5 голосов
/ 13 ноября 2011

Я пытаюсь создать гистограмму с двумя сериями данных.Я хочу, чтобы одна серия была нарисована справа, а одна серия - слева.

Если я введу отрицательные значения для Австрии, то они начнут рисовать эти значения, ориентированные влево.Можно ли каким-либо образом ориентировать ряд данных по Австрии влево, а ряд данных по Болгарии - вправо, не делая значения отрицательными?

Я играл с одним из примеров API Google Vizualization, и вот что я придумал (вероятно, проще всего вставить следующий код в http://code.google.com/apis/ajax/playground/?type=visualization#bar_chart):

     function drawVisualization() {
       // Create and populate the data table.
       var data = new google.visualization.DataTable();
       var raw_data = [['Austria', -1336060, -1538156, -1576579, -1600652, -1968113, 1901067],
                       ['Bulgaria', 400361, 366849, 440514, 434552, 393032, 517206],
                       //['Denmark', 1001582, 1119450, 993360, 1004163, 979198, 916965],
                       //['Greece', 997974, 941795, 930593, 897127, 1080887, 1056036]
                      ];

       var years = [2003, 2004, 2005, 2006, 2007, 2008];

       data.addColumn('string', 'Year');
       for (var i = 0; i  < raw_data.length; ++i) {
         data.addColumn('number', raw_data[i][0]);    
       }

       data.addRows(years.length);

       for (var j = 0; j < years.length; ++j) {    
         data.setValue(j, 0, years[j].toString());    
       }
       for (var i = 0; i  < raw_data.length; ++i) {
         for (var j = 1; j  < raw_data[i].length; ++j) {
            data.setValue(j-1, i+1, raw_data[i][j]);    
         }
       }

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

связка, дайте мне знать, если я смогу что-то уточнить.

Ответы [ 2 ]

3 голосов
/ 22 октября 2012

Вместо столбчатой ​​диаграммы можно использовать столбчатую диаграмму, которая, похоже, похожа друг на друга. https://developers.google.com/chart/interactive/docs/gallery/columnchart

2 голосов
/ 21 марта 2012

Используйте параметр series, чтобы определить две отдельные горизонтальные оси для диаграммы. Установите параметр direction на второй горизонтальной оси на -1 , чтобы значения выходили из правой части диаграммы.

series:{1:{targetAxisIndex:1}}, hAxes:{1:{direction:-1}}

...