在h轴标签附近显示小线

Question

我正在使用谷歌图表API。我有一个柱形图，我想在靠近h轴的每个标签附近显示一条小线，如下面的示例图所示。

需要进行哪些修改才能显示h轴上显示的每个标签附近的小线。

演示：https://jsfiddle.net/8tvm9qk5/

js code：

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

function drawStacked() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Departamentos');
      data.addColumn('number', 'Entregados');
      data.addColumn('number', 'En Stock');

      data.addRows([
        ['abdasdasa', 925, 786],
        ['bbdasdas', 652, 156],
        ['cbdasdas', 300, 200],
        ['ddasdasb', 925, 786],
        ['edasdb', 652, 156],
        ['fasdasb', 300, 200],
        ['gdasdasdb', 925, 786],
        ['abdasdasa', 925, 786],
        ['bbdasdas', 652, 156],
        ['cbdasdas', 300, 200],
        ['ddasdasb', 925, 786],
        ['edasdb', 652, 156],
        ['fasdasb', 300, 200],
        ['gdasdasdb', 925, 786]
      ]);
     var options = {
        title: 'Motivation and Energy Level Throughout the Day',
        isStacked: true,
        height:600,
        chartArea: {
            height:300,
          top:100,
        },
        hAxis: {
          title: 'Departamentos',
          titleTextStyle: {
            color: '#FF0000',            
          },

          slantedText:true,
          slantedTextAngle:45,

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

- EDITED-- 我尝试如下所示，但无法获得预期的结果。

示例代码：

var data = new google.visualization.DataTable();
      data.addColumn('string', 'Departamentos');
      data.addColumn('number', 'Entregados');
      data.addColumn('number', 'En Stock');
      data.addColumn('number', 'dumy');
      data.addColumn({type:'string', role:'annotation'}); 
 data.addRows([
        ['abdasdasa', 925, 786,0, ''],
        ['bbdasdas', 652, 156,0, ''],
        ['cbdasdas', 300, 200,0, ''],
  .....]);

PS：我也尝试过交换列序列：

 ...
 data.addColumn({type:'string', role:'annotation'}); 
 data.addColumn('number', 'dumy');

演示：https://jsfiddle.net/1xq2nj16/

Answer 1

当 - >时，虚拟系列需要是第一个isStacked: true
或者将系列更改为其他类型以从堆栈中断开...
（请参阅以下代码段中的series选项）

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Departamentos');
  data.addColumn('number', 'dumy');
  data.addColumn({type:'string', role:'annotation'});  // interval role col.
  data.addColumn('number', 'Entregados');
  data.addColumn('number', 'En Stock');

  data.addRows([
    ['abdasdasa', 0, '', 925, 786],
    ['bbdasdas', 0, '', 652, 156],
    ['cbdasdas', 0, '', 300, 200],
    ['ddasdasb', 0, '', 925, 786],
    ['edasdb', 0, '', 652, 156],
    ['fasdasb', 0, '', 300, 200],
    ['gdasdasdb', 0, '', 925, 786],
    ['abdasdasa', 0, '', 925, 786],
    ['bbdasdas', 0, '', 652, 156],
    ['cbdasdas', 0, '', 300, 200],
    ['ddasdasb', 0, '', 925, 786],
    ['edasdb', 0, '', 652, 156],
    ['fasdasb', 0, '', 300, 200],
    ['gdasdasdb', 0, '', 925, 786]
  ]);

  var options = {
    annotations: {
      stem: {
        color: '#000000'
      },
      style: 'line',
      textStyle: {
        fontSize: 10
      },
    },
    title: 'Motivation and Energy Level Throughout the Day',
    isStacked: true,
    height: 600,
    chartArea: {
      height: 300,
      top: 100
    },
    hAxis: {
      title: 'Departamentos',
      pointSize: 0,
      titleTextStyle: {
        color: '#ff0000',
      },
      slantedText: true,
      slantedTextAngle: 45
    },
    series: {
      0: {
        color: 'transparent',
        type: 'line',
        visibleInLegend: false,
        enableInteractivity: false
      }
    },
    vAxis: {
      title: 'Kits'
    }
  };
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

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

可以进一步调整以获得x轴下方的刻度线，
使用负虚拟值，并调整y轴以允许负值的空间...
（请参阅以下代码段中的vAxis选项）

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Departamentos');
  data.addColumn('number', 'dumy');
  data.addColumn({type:'string', role:'annotation'});  // interval role col.
  data.addColumn('number', 'Entregados');
  data.addColumn('number', 'En Stock');

  data.addRows([
    ['abdasdasa', -32, '', 925, 786],
    ['bbdasdas', -32, '', 652, 156],
    ['cbdasdas', -32, '', 300, 200],
    ['ddasdasb', -32, '', 925, 786],
    ['edasdb', -32, '', 652, 156],
    ['fasdasb', -32, '', 300, 200],
    ['gdasdasdb', -32, '', 925, 786],
    ['abdasdasa', -32, '', 925, 786],
    ['bbdasdas', -32, '', 652, 156],
    ['cbdasdas', -32, '', 300, 200],
    ['ddasdasb', -32, '', 925, 786],
    ['edasdb', -32, '', 652, 156],
    ['fasdasb', -32, '', 300, 200],
    ['gdasdasdb', -32, '', 925, 786]
  ]);

  var options = {
    annotations: {
      stem: {
        color: '#000000'
      },
      style: 'line',
      textStyle: {
        fontSize: 10
      },
    },
    title: 'Motivation and Energy Level Throughout the Day',
    isStacked: true,
    height: 600,
    chartArea: {
      height: 300,
      top: 100
    },
    hAxis: {
      title: 'Departamentos',
      pointSize: 0,
      titleTextStyle: {
        color: '#ff0000',
      },
      slantedText: true,
      slantedTextAngle: 45
    },
    series: {
      0: {
        color: 'transparent',
        type: 'line',
        visibleInLegend: false,
        enableInteractivity: false
      }
    },
    vAxis: {
      ticks: [0, 500, 1000, 1500, 2000],
      title: 'Kits',
      viewWindow: {
        min: -64
      }
    }
  };
  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

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