Как пометить столбцы диаграммы столбцов Google

Question

Я использую Google Chart API для создания диаграммы для значений, которые идут от 1 до миллионов.

Проблема Стержни, которые представляют меньшие значения (например: менее 50 или около того) не видны на графике, и никоим образом не может увидеть, что значения соответствуют определенной оси х.

Это будет разрешено, если я смогу каким-либо образом напечатать значения оси Y поверх баров. Но я не мог найти упоминания в документе API о том, как это сделать.

Здесь есть аналогичная проблема, но это не отвечает на мой вопрос.

put labels on top of inside bar in google interactive bar chart

Есть некоторые другие более старые года безответные вопросы здесь, я надеюсь, кто-то нашел решение или обходной путь теперь, поэтому снова задаю этот вопрос.

Google Visualization: Column Chart, simple question but can't find the answer

How to show values on the the top of columns Google Chart API

Можете ли вы показать мне, как добиться того, что я хочу с помощью How can I customize this Google Bar Chart??

Answer 1

Заканчивать Эндрю Gallant в JSFiddle здесь:

http://jsfiddle.net/asgallant/QjQNX/

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

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

function drawChart() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Name'); 
    data.addColumn('number', 'Value'); 
    data.addColumn({type: 'string', role: 'annotation'}); 

    data.addRows([ 
    ['Foo', 53, 'Foo text'], 
    ['Bar', 71, 'Bar text'], 
    ['Baz', 36, 'Baz text'], 
    ['Cad', 42, 'Cad text'], 
    ['Qud', 87, 'Qud text'], 
    ['Pif', 64, 'Pif text'] 
    ]); 

    var view = new google.visualization.DataView(data); 
    view.setColumns([0, 1, 1, 2]); 

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

    chart.draw(view, { 
    height: 400, 
    width: 600, 
    series: { 
     0: { 
     type: 'bars' 
     }, 
     1: { 
     type: 'line', 
     color: 'grey', 
     lineWidth: 0, 
     pointSize: 0, 
     visibleInLegend: false 
     } 
    }, 
    vAxis: { 
     maxValue: 100 
    } 
    }); 
} 

Answer 2

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

Я сделал взлом для ComboChart (может работать с BarChart и ColumnChart, а также с несколькими изменениями), чтобы вставить метки в SVG.

Заканчивать эту скрипку: http://jsfiddle.net/augustomen/FE2nh/

Проверено на Firefox 21, Chrome 27 и IE 9.