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

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

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.


charts google-visualization
person Oleg Kalyta    schedule 20.10.2011    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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 и проверьте сами.

person Leksat    schedule 27.08.2012