Google visualization 谷歌图表vAxis标题被删除,需要向axis靠拢
我正在尝试使用谷歌图表来显示调查结果。一切似乎都很好,除了vAxis的标题被稍微删掉了,我不知道如何把它移近轴心 代码如下:Google visualization 谷歌图表vAxis标题被删除,需要向axis靠拢,google-visualization,Google Visualization,我正在尝试使用谷歌图表来显示调查结果。一切似乎都很好,除了vAxis的标题被稍微删掉了,我不知道如何把它移近轴心 代码如下: google.load("visualization", "1.0", {packages:["bar"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['
google.load("visualization", "1.0", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Question title goes here', 'Percentage Score'],
['Always', 40],
['Usually', 30],
['Rarely', 10],
['Never', 20]
]);
var options = {
chart: {
title: 'Section Title',
subtitle: 'Section subtitle',
},
legend: { position: "none" },
vAxis: {
title: 'Percentage',
viewWindowMode:'explicit',
viewWindow: {
max:100,
min:0
}
},
bars: 'vertical', // Required for Material Bar Charts.
width: 600,
height: 500
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
};
我这里有一把小提琴:
使用核心图表,您可以调整图表区域的大小,以便为标题留出空间
但是,这似乎不适用于材质图表
另外,我建议使用loader.js
加载,而不要使用较旧的库jsapi
请参阅下面的示例
google.charts.load('current'{
回调:图纸,
软件包:['bar','corechart']
});
函数绘图图(){
var data=google.visualization.arrayToDataTable([
[“问题标题在这里”,“百分比分数”],
[Always',40],
[“通常”,30],
[“很少”,10],
[Never',20]
]);
变量选项={
图表:{
标题:“章节标题”,
副标题:“部分副标题”,
},
图表区:{
背景颜色:“青色”,
身高:400,
左:60,,
前20名,
宽度:500
},
图例:{
位置:“无”
},
言辞:{
标题:“百分比”,
viewWindowMode:“显式”,
视图窗口:{
最高:100,
最低:0
}
},
酒吧:“垂直”,
宽度:600,
身高:500
};
var chart=new google.charts.Bar(document.getElementById('barchart_material');
绘制(数据,google.charts.Bar.convertOptions(选项));
var chart2=新的google.visualization.ColumnChart(document.getElementById('barchart_core');
图表2.绘制(数据、选项);
};代码>
=======材料========
=============核心==========
我设法找到了解决这个问题的真正办法。我已更新图表脚本,使vAxis fontSize为18:
google.load("visualization", "1.0", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'Percentage'],
['Always', 40],
['Usually', 30],
['Rarely', 10],
['Never', 20]
]);
var options = {
chart: {
title: 'Company Performance'
},
legend: { position: "none" },
vAxis: {
title: 'Percentage',
titleTextStyle: {
fontSize: '18',
},
viewWindowMode:'explicit',
viewWindow: {
max:100,
min:0
}
},
bars: 'vertical', // Required for Material Bar Charts.
width: 400,
height: 400
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
};
然后,我添加了CSS设置,以强制字体大小恢复正常:
#barchart_material g text {
font-size: 12px !important;
}
我在这里更新了小提琴: