Показывать надписи над столбцами в Google Charts - PullRequest
Новая
       0

Показывать надписи над столбцами в Google Charts

2 голосов
/ 20 октября 2011

У меня есть простая Google Column Chart с одной серией данных. И мне нужно показывать подписи над каждой строкой, потому что подсказки недостаточно. Но нет стандартных вариантов сделать это. Вы видели это? 

google.load('visualization', '1', {packages: ['corechart']});  

$(document).ready(function() {

var data = new google.visualization.DataTable()
    data.addColumn('string', 'Topping');
    data.addColumn('number', 'Slices');
    data.addRows([
    ['Mushrooms', 3],
    ['Onions', 1],
    ['Olives', 1], 
    ['Zucchini', 1],
    ['Pepperoni', 2]
]);


new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data, {width: 500, height: 440, legend: 'none',
            enableInteractivity: false});  
});

также вы можете играть с этим кодом на jsfiddle

1 Ответ

1 голос
/ 27 августа 2012

Этот ответ немного больше, чем было задано. Приведенный ниже код демонстрирует, как создать гистограмму с разными цветами для каждой полосы и с разными надписями над каждой полосой. 

function drawVisualization() {

  var data = google.visualization.arrayToDataTable([
    ['',        'Value', 'Value', 'Value', 'Value' ],
    ['Label1',  0,       0,       0,       997974  ],
    ['Label2',  1538156, 0,       0,       0       ],
    ['Label3',  0,       440514,  0,       0       ],
    ['Label4',  0,       0,       1004163, 0       ]
  ]);

  new google.visualization.BarChart(document.getElementById('visualization')).
      draw(data,
           {
            isStacked: true,
            legend: {position: 'none'},
            colors: ['grey', 'lightgray', 'yellow', 'cyan']
           }
      );
}​

Вставьте его на игровую площадку Google и проверьте себя.

...