如何在Google柱形图上显示标签

时间:2016-05-19 11:58:27

标签: jquery charts

我们已在我们的应用程序&中实施了谷歌列图表。我们将数据绑定到图表上。

我想在每个柱形图的顶部显示图形的值。

enter image description here

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

1 个答案:

答案 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>