问Google charts :自定义柱状图中的h轴基线

EN

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  barTitle = 'Occupancy';
  barType = 'ColumnChart';
  barData = [
    [{v: 0, f:''}, 0,0,0,0],
    [{v:1,f:'SUN'}, 5,8,10,12],
    [{v:2,f:"MON"}, 6,4,14,10],
    [{v:3,f:"TUE"}, 13,10,3,9],
    [{v:4,f:"WED"}, 10,16,8,6],
    [{v:5,f:"THU"}, 16,9,8,6],
    [{v:6,f:"FRI"}, 5,5,10,14],
    [{v:7,f:"SAT"}, 9,12,4,11]
  ];
  barColumnNames = ['DAY', 'Regular','Compact','Electric','ADA'];
  barOptions = {
    hAxis:{
      title:'DAY',
      titlePosition:'in',
      ticks:[
        {v: 0, f:''},
        {v:1,f:'SUN'},
        {v:2,f:"MON"},
        {v:3,f:"TUE"},
        {v:4,f:"WED"},
        {v:5,f:"THU"},
        {v:6,f:"FRI"},
        {v:7,f:"SAT"}
      ]
    },
    vAxis: {
      gridlines: {
        color: 'none'
      },
      ticks: [0, .25, .50, .75, 1],
      baselineColor:'#00ff00',
    },
    isStacked:"percent",
    width:550,
    height:300,
    bar:{groupWidth:"25%"},
    legend:{position:"none"},
    series:{
      0:{color:'rgb(185,2,118)'},
      1:{color:'rgb(82,95,107)'},
      2:{color:'rgb(0,142,207)'}
    },
  };

  barData.splice(0, 0, barColumnNames);
  var dataTable = google.visualization.arrayToDataTable(barData);
  var container = document.getElementById('chart_div');
  var chart = new google.visualization[barType](container);
  google.visualization.events.addListener(chart, 'ready', function () {
    // init variables
    var svg = container.getElementsByTagName('svg')[0];
    var svgNS = svg.namespaceURI;
    var chartLayout = chart.getChartLayoutInterface();
    var baseBounds = chartLayout.getBoundingBox('hAxis#0#baseline');

    // add tick lines
    var tickWidth = 10;
    barOptions.vAxis.ticks.forEach(function (tick, index) {
      // ignore baseline
      if (index === 0) {
        return;
      }

      // add axis tick
      var tickBounds = chartLayout.getBoundingBox('vAxis#0#label#' + index);
      var tickLine = svg.appendChild(document.createElementNS(svgNS, 'rect'));
      tickLine.setAttribute('x', (baseBounds.left - tickWidth));
      tickLine.setAttribute('y', tickBounds.top + (tickBounds.height / 2));
      tickLine.setAttribute('width', tickWidth);
      tickLine.setAttribute('height', 1);
      tickLine.setAttribute('stroke', 'none');
      tickLine.setAttribute('stroke-width', 0);
      tickLine.setAttribute('fill', '#333333');
    });
  });
  chart.draw(dataTable, barOptions);
});

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