Question

就我而言，需要实现以下目标

x轴名称基线的结尾
y轴名称位于基线的顶部

请参阅参考图片。

请帮助我们解决此问题。

Answer 1

轴标签位置不能直接更改，
但我们可以添加自己的标签，
在图表的'ready'事件中。

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  axisTitle = 'Day';
  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 baseBoundsX = chartLayout.getBoundingBox('hAxis#0#baseline');
    var baseBoundsY = chartLayout.getBoundingBox('vAxis#0#baseline');
    var labelCopy = svg.getElementsByTagName('text')[0];

    // 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', (baseBoundsX.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');

      // add y-axis label
      if (index === (barOptions.vAxis.ticks.length - 1)) {
        var labelBounds = chartLayout.getBoundingBox('vAxis#0#label#0');
        var labelY = labelCopy.cloneNode(true);
        svg.appendChild(labelY);
        labelY.setAttribute('x', labelBounds.left);
        labelY.setAttribute('y', (tickBounds.top - parseFloat(labelY.getAttribute('font-size'))));
        labelY.setAttribute('text-anchor', 'right');
        labelY.textContent = barTitle;
      }
    });

    // add x-axis label
    var labelX = labelCopy.cloneNode(true);
    svg.appendChild(labelX);
    labelX.setAttribute('x', (baseBoundsY.left + baseBoundsY.width + parseFloat(labelX.getAttribute('font-size'))));
    labelX.setAttribute('y', baseBoundsY.top);
    labelX.setAttribute('text-anchor', 'right');
    labelX.textContent = axisTitle;
  });
  chart.draw(dataTable, barOptions);
});

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

Google图表：在柱形图中显示轴线名称的轴终点或轴顶端

1 个答案: