我正在寻找一种在我的图形上有多个系列的方法,它具有相同的比例,但只显示一次。
你可以在这里看到: http://jsfiddle.net/Youkoal/d3xwnqdu/ 我有4个séries,图表显示所有4轴。
我注意到这些属性似乎不起作用:
TextStyle: {color: 'none'}
,也不
{format: 'none'}
包含在轴选项中。
如何“隐藏”这些轴或将所有系列放在相同的音阶上?
答案 0 :(得分:0)
textStyle
中的第一个字母应该是小写的......
textStyle: {
color: 'none'
}
这会隐藏文字,但图表仍会为标签分配空间,
最小化,减少fontSize
......
textStyle: {
color: 'none',
fontSize: 1
}
理想情况下我们可以使用textPosition: 'none'
,但材料图表不支持此选项。
Tracking Issue for Material Chart Feature Parity
请参阅以下工作代码段...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Semaines', 'Test Region', 'Test2 Region', 'Test SerieNE', 'Test2 SerieNE', 'Test SerieS', 'Test2 SerieS', 'Test SerieO', 'Test2 SerieO'],
['Semaine 1', 0, 0, 0, 0, 0, 0, 0, 0],
['Semaine 2', 0, 0, 0, 0, 0, 0, 0, 0],
['Semaine 3', 0, 0, 0, 0, 0, 0, 0, 0],
['Semaine 4', 24, 0, 21, 0, 0, 0, 3, 0],
['Semaine 5', 122, 0, 21, 0, 52, 0, 49, 0],
['Semaine 6', 361, 0, 23, 0, 325, 0, 13, 0],
['Semaine 7', 51, 0, 21, 0, 11, 0, 19, 0],
['Semaine 8', 81, 3, 3, 0, 64, 3, 14, 0],
['Semaine 9', 711, 22, 81, 3, 527, 9, 103, 10],
['Semaine 10', 139, 13, 26, 5, 104, 5, 9, 3],
['Semaine 11', 255, 12, 139, 2, 33, 4, 83, 6],
['Semaine 12', 256, 10, 23, 4, 15, 5, 218, 1],
['Semaine 13', 145, 26, 84, 7, 58, 16, 3, 3],
['Semaine 14', 112, 15, 51, 0, 34, 11, 27, 4],
['Semaine 15', 122, 27, 29, 8, 53, 14, 40, 5],
['Semaine 16', 98, 18, 17, 6, 31, 7, 50, 5],
['Semaine 17', 87, 21, 12, 6, 37, 3, 38, 12],
]);
var options = {
chart: {
title: 'Suivis hebdo',
subtitle: 'Pilotage',
},
bars: 'vertical',
isStacked: true,
height: 600,
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
},
4: {
targetAxisIndex: 2
},
5: {
targetAxisIndex: 2
},
6: {
targetAxisIndex: 3
},
7: {
targetAxisIndex: 3
}
},
vAxis: {
format: 'decimal',
viewWindow: {
min: 0,
max: 1000
}
},
vAxes: {
1: {
textStyle: {
color: 'none',
fontSize: 1
}
},
2: {
textStyle: {
color: 'none',
fontSize: 1
}
},
3: {
textStyle: {
color: 'none',
fontSize: 1
}
}
},
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
备注:
1)需要使用正确的库,不再使用jsapi
,而是使用loader.js
这只会更改load
语句,请参阅上面的代码段...
2)您可以使用选项vAxis
来设置所有vAxes
3)没有必要将第一个系列移动到另一个targetAxisIndex