如何将文本添加到谷歌图表柱形图轴?

时间:2016-12-27 20:14:47

标签: javascript google-visualization

我正在尝试使用谷歌图表来表示列图表样式中的技能水平。但是我无法弄清楚如何在y轴上添加文字。我想要实现的是沿着x轴的技能和y轴上的水平,如初学者,中级,高级和专家。

我的代码:

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

var data = google.visualization.arrayToDataTable([

        ['Skill','Skill Level', { role: 'style' }],
        ['Graphic Design', 8.94, 'blue'],            
        ['Branding', 21.45, 'red' ],
        ['Photoshop CC', 21.45, 'green' ], 
        ['Illustrator CC', 200, 'yellow' ],
    ]);
var options = {
    legend: {position: 'none'},
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
google.setOnLoadCallback(drawData);

1 个答案:

答案 0 :(得分:0)

使用带有格式化值的vAxis.ticks。看一下这个生活中的例子:https://jsfiddle.net/Balrog30/009nk1fp/

options.vAxis = {
  ticks: [
    {v: 0, f: 'Nap Time'},
    {v: 2.5, f: 'Bored'},
    {v: 5, f: 'Productive'},
    {v: 7.5, f: 'Excited'},
    {v:10, f: 'Caffeine Overload'}
  ]
}