Google图表：在柱形图中显示轴线名称的轴终点或轴顶端 [英] Google charts: Show axis-line name end of the axis or top of the axis in column chart

问题描述

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

In my case need to achieve the following things

1. x轴名称位于基线的末端


2. 并且y轴名称位于基线的顶部

请参见参考图像。

请帮助我们解决此问题。

Please help us to resolve this issue.

推荐答案

轴标签位置不能立即更改，

，但是我们可以添加自己的标签，

在图表的就绪 事件中。

axis label position cannot be changed out of the box,
but we can add our own labels,
on the chart's 'ready' event.

请参阅以下工作摘要...

see following working snippet...

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图表：在柱形图中显示轴线名称的轴终点或轴顶端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！