angular - 谷歌图表:在柱形图中显示轴的末端或轴的顶部
解决方案
轴标签位置不能立即更改,但我们可以
在图表的事件 上
添加自己的标签。'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>
推荐阅读
- python - 在 Apache 中使用 Anaconda Python 时在标头之前结束脚本输出
- java - 在 Web 应用程序中 @Inject @Remote EJB
- python - 如何组合到具有不同字段的数组
- sql - 求和函数问题 PostgreSQL 9.4.5
- sql - 窗口函数在 sql 的操作顺序中位于哪里?
- mongodb - nor 运算符不能用于过滤条件
- android - React-Camera:未定义不是对象(评估'CameraManager.Aspect.fill)
- php - 如何将一个视图页面的一部分调用到另一个视图页面?
- java - Hibernate @Formula 不包含架构
- lua - luarocks lyaml 安装错误