我们已在我们的应用程序&中实施了谷歌列图表。我们将数据绑定到图表上。
我想在每个柱形图的顶部显示图形的值。
var cols = [{ id: 'task', label: 'Employee Name', type: 'string' },
{ id: 'startDate', label: 'col1', type: 'number' },
{ id: 'startDate2', label: 'col2', type: 'number' },
{ id: 'startDate3', label: 'col3', type: 'number' }];
var rows = [{ c: [{ v: 'Frank' }, { v: 40 }, { v: 50 }, { v: 40 }] },
{ c: [{ v: 'Floyd' }, { v: 50 }, { v: 60 }, { v: 30 }] },
{ c: [{ v: 'Fritz' }, { v: 10 }, { v: 40 }, { v: 20 }] }];
var data = new google.visualization.DataTable({
cols: cols,
rows: rows
})
var options = {
height: 300,
width: 900,
chart: {
title: 'Demand'
//subtitle: 'distance on the left, brightness on the right'
},
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, options);
答案 0 :(得分:0)
为了标记条形,您可以使用注释列 见Column Roles
遗憾的是,注释不适用于 Material Charts
以下示例使用DataView
添加注释列
google.charts.load('current', {
callback: function () {
var cols = [{ id: 'task', label: 'Employee Name', type: 'string' },
{ id: 'startDate', label: 'col1', type: 'number' },
{ id: 'startDate2', label: 'col2', type: 'number' },
{ id: 'startDate3', label: 'col3', type: 'number' }];
var rows = [{ c: [{ v: 'Frank' }, { v: 40 }, { v: 50 }, { v: 40 }] },
{ c: [{ v: 'Floyd' }, { v: 50 }, { v: 60 }, { v: 30 }] },
{ c: [{ v: 'Fritz' }, { v: 10 }, { v: 40 }, { v: 20 }] }];
var data = new google.visualization.DataTable({
cols: cols,
rows: rows
});
var view = new google.visualization.DataView(data);
view.setColumns([0,
1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2,
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
},
3,
{
calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation"
}
]);
var options = {
height: 300,
width: 900,
chart: {
title: 'Demand'
//subtitle: 'distance on the left, brightness on the right'
},
};
// material chart
var chart = new google.charts.Bar(document.getElementById('chart_div0'));
chart.draw(view, options);
// core chart
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1'));
chart.draw(view, options);
},
packages: ['bar', 'corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<h1>Core Chart</h1>
<div id="chart_div1"></div>
<h1>Material Chart</h1>
<div id="chart_div0"></div>