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

发布于 2024-12-11 02:02:09 字数 729 浏览 0 评论 0原文

我有一个简单的谷歌柱形图，其中包含一系列数据。我需要在每个栏上方显示标题，因为工具提示还不够。但没有标准选项可以做到这一点。你看到这个了吗？

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 中使用此代码

原文

I have simple Google Column Chart with one series of data. And i need to show captions above each bar, because tooltip not enough.
But there are no standart options to do it. You seen this?

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});  
});

also you can play with this code at jsfiddle

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绝影如岚 2024-12-18 02:02:09

这个答案与所问的内容差不多。下面的代码演示了如何创建每个条形具有不同颜色并在每个条形上方具有不同标签的条形图。

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

This answer is little more than what been asked. The code below demonstrates how to create bar chart with different colors for each bar, and with different labels above each bar.

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']
           }
      );
}

Paste it in google playground and check yourself.

回复收藏 0 原文

~没有更多了~