谷歌图表：轴在柱形图轴线或顶部的显示轴线名称端(Google charts: Show axis-l

在我的情况需要实现以下几件事

1. 基线的x轴名称端
2. 与基线的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 charts: Show axis-line name end of the axis or top of the axis in column chart