Центрированные столбцы на Google Chart BarChart? - PullRequest
Новая
       13

Центрированные столбцы на Google Chart BarChart?

3 голосов
/ 05 июля 2011

Есть ли способ использовать API JavaScript Google Chart для центрирования столбцов на гистограмме, подобной этой - Пример Google Chart ?Я хотел бы эмулировать воронкообразный график с помощью Google Charts.Google Charts не поддерживает воронкообразный тип графика.

enter image description here

1 Ответ

9 голосов
/ 18 июля 2011

Да, это возможно.По сути, в этом примере они создают базовую гистограмму (http://code.google.com/apis/chart/interactive/docs/gallery/barchart.html).. Чтобы получить эффект «воронки», они создают диаграмму с накоплением (в javascript см. Свойство isStacked). Первый элемент - белый цвети следующий элемент в этом примере - оранжевый.

Вы можете сами убедиться в этом, изменив свойство color: chco = ffffff, FF9900, например, на chco = aaaaaa, FF9900.

http://chart.apis.google.com/chart?cht=bhs&chco=aaaaaa,FF9900&chxt=x,x,y&chxl=1:|Percentage%20converting|2:|Step%206|Step%205|Step%204|Step%203|Step%202|Step%201&chxp=1,50|3,50&chd=t:0,12.5,28,29,35.5,48.5|100,75,44,42,29,3&chbh=a&chs=800x230&chm=N**%,000000,1,-1,11,,c&chds=0,100

Тогда вы увидите, что это базовый составной график, а не новый тип графика.

Следующий код показывает, как это сделать: 

    function drawVisualization() {
  // Create and populate the data table.
  var data = new google.visualization.DataTable();
  var raw_data = [['Invisible', 10, 20, 30, 40],
                  ['Visible', 80, 60, 40, 20]];

  var years = ["Step1", "Step2", "Step3", "Step4"];

  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,
            colors: ['ffffff','aaaaaa'], 
            vAxis: {title: "Year"},
            hAxis: {title: "Cups", gridlineColor : 'ffffff'}, isStacked: true}
      );
}

1015 *

...