Question

我有简单的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

播放此代码

Answer 1

这个答案比问的答案多一点。下面的代码演示了如何为每个条形图创建不同颜色的条形图，以及每个条形图上方的不同标签。

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 playground并自行检查。

在Google Charts中显示条形图上方的标题

1 个答案: