Question

我正在尝试使用谷歌图表创建柱形图。我可以使用以下内容将值放在条形图的顶部：

        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Estacionamento');
        data.addColumn('number', 'Valor');
        data.addColumn({type: 'number', role:'annotation'});

并创建一个视图：

chart.draw(view, {
                                height: 600,
                                width: 600,
                                series: {
                                    0: {
                                        type: 'bars'
                                    },
                                    1: {
                                        type: 'line',
                                        color: 'grey',
                                        lineWidth: 0,
                                        pointSize: 0,
                                        visibleInLegend: false
                                    }
                                },
});

我想知道是否可以在栏内显示一个值。现在，它正在作为工具提示工作，但我想显示没有像这个图像的工具提示的值：

enter image description here

Answer 1

我找到了解决问题的方法.... check this example

我的解决方案：简单，添加一个大小为0的列，然后添加一个注释......

为最后一列选择透明颜色......

Javascript代码：

google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStacked);

function drawStacked() {
      var data = new google.visualization.DataTable();
      data.addColumn('timeofday', 'Time of Day');
      data.addColumn('number', 'Motivation Level');
      data.addColumn({type:'string', role:'annotation'});      
      data.addColumn('number', 'Energy Level');
      data.addColumn({type:'string', role:'annotation'});
      data.addColumn('number', 'test Level');
      data.addColumn({type:'string', role:'annotation'});
      data.addColumn('number', 'Motivation Level');
      data.addColumn({type:'string', role:'annotation'});

      data.addRows([
        [{v: [9, 0, 0], f: '8 am'},{v:40,f:"asd"},"q",{v:40,f:"asd"},"q",{v:40,f:"asd"},"q",{v:0},"q"],
        [{v: [10, 0, 0], f: '8 am'},{v:40,f:"asd"},"q",{v:40,f:"asd"},"q",{v:40,f:"asd"},"q",{v:0},"q"],
        [{v: [11, 0, 0], f: '8 am'},{v:100,f:"asd"},"q",{v:40,f:"asd"},"q",{v:40,f:"asd"},"q",{v:0},"q"],
      ]);

      var options = {
        title: 'Motivation and Energy Level Throughout the Day',
        isStacked: true,
        annotations: {
        alwaysOutside : false,
          textStyle: {
            fontSize: 14,
            color: '#000',
            auraColor: 'none'
          }
        },
        hAxis: {
          title: 'Time of Day',
          format: 'h:mm a',
        },
        vAxis: {
          title: 'Rating (scale of 1-10)',
          viewWindow:{
                max:200,
                min:0
              }
        },
        colors: ["blue","red","green","transparent"],
        bar: {groupWidth: "95%"},
      };

      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

HTML code：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <div id="chart_div"></div>

标签内部和顶部

1 个答案: