如何解决Google图表-将组合图数据最大程度地左右对齐
我有一个包含面积,条形图和折线图的组合图。我希望面积图和折线图最大程度地对齐到左侧和右侧。对于条形图,则不需要。不幸的是,我无法正确对齐图形。我遍历了文档,找不到解决我问题的方法。
这是图表的GoogleChartInterface对象(我正在添加dataTable并动态滴答):
{
chartType: 'ComboChart',dataTable: [],options: {
focusTarget: 'category',animation: {
startup: true,easing: 'out',duration: 500,},height: '160',chartArea: {
width: '90%',height: '79%',vAxes: {
0: {
titlePosition: 'none',textStyle: {
color: '#febd02',bold: true,fontSize: 13,format: '#',gridlines: {
color: '#eaeaea',count: '5',interpolateNulls: true,1: {
titlePosition: 'none',gridlines: {
color: 'transparent'
},2: {
groupWidth: '100%',titlePosition: 'none',textStyle: {
color: '#0284ff',format: 'decimal',hAxis: {
textStyle: {
color: '#393939',format: 'EEEE',gridlines: {
count: 0,color: 'transparent'
},ticks: [],series: {
0: {
targetAxisIndex: 0,type: 'area',1: {
type: 'line'
},2: {
targetAxisIndex: 2,type: 'bars',dataOpacity: 0.5,colors: [
'#febd02','#a5a5a5','#0284ff',],bar: {
groupWidth: '35'
},legend: {
position: 'none'
},};
解决方法
为了将面积和线系列延伸到图表的边缘,
我们必须首先使用将呈现连续x轴的数据类型。
在这种情况下,我们将使用日期时间。
接下来,我们使用选项hAxis.viewWindow
控制系列的开始和结束位置。viewWindow
有两个属性,min
和max
。min
和max
的值应与x轴的数据类型匹配。
在这种情况下,我们将值设置为系列应开始和结束的日期。
hAxis: {
viewWindow: {
min: new Date(2020,10,13),max: new Date(2020,19)
}
}
这会将系列扩展到图表的边缘。
有关示例,请参见以下工作片段...
google.charts.load('current',{
packages: ['controls','corechart']
}).then(function() {
var data = google.visualization.arrayToDataTable([
['Date','y0','y1','y2'],[new Date(2020,100,50,25],14),110,45,5],15),90,40,60],16),80,30,10],17),70,20,0],18),60,19),5,0]
]);
var chart = new google.visualization.ChartWrapper({
chartType: 'ComboChart',containerId: 'chart',dataTable: data,options: {
focusTarget: 'category',animation: {
startup: true,easing: 'out',duration: 500,},chartArea: {
left: 60,top: 12,right: 60,bottom: 72,height: '100%',width: '100%'
},width: '100%',vAxes: {
0: {
titlePosition: 'none',textStyle: {
color: '#febd02',bold: true,fontSize: 13,format: '#',gridlines: {
color: '#eaeaea',count: '5',interpolateNulls: true,1: {
titlePosition: 'none',gridlines: {
color: 'transparent'
},2: {
groupWidth: '100%',titlePosition: 'none',textStyle: {
color: '#0284ff',format: 'decimal',hAxis: {
textStyle: {
color: '#393939',format: 'dd MMM. yyyy',gridlines: {
color: 'transparent'
},ticks: data.getDistinctValues(0),viewWindow: data.getColumnRange(0)
},series: {
0: {
targetAxisIndex: 0,type: 'area',1: {
type: 'line'
},2: {
targetAxisIndex: 2,type: 'bars',dataOpacity: 0.5,colors: [
'#febd02','#a5a5a5','#0284ff',],bar: {
groupWidth: '35'
},legend: {
position: 'none'
},});
chart.draw();
});
html,body {
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#chart {
min-height: 160px;
height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。