在h轴上使用ticks选项时的问题:谷歌图表

问题描述 投票:1回答:1

我使用的是google chart的combo stacked bar,我想显示h轴的显式值,所以使用了ticks选项。我想显示h轴的显式值,所以我使用了ticks选项。但是,在使用这个选项后,我的图表在h轴上一次显示所有的条形值。但是,我想限制条形图,比如说一次只显示5个,然后通过滑动charRangeFilter动态地显示其余的条形图。当我使用图片中的ticks选项时,这些条形图几乎显示为直线。有人能帮我解决这个问题吗?任何帮助是非常感激

以下是图表选项的代码

let hTicks = new  Array<Date>(); // I already populated this array with Dates

let chart = new google.visualization.ChartWrapper({     
                'chartType': 'ComboChart',     
                'containerId': 'chartRangeFilter_chart_div',      
                'options': { . 
                    // Use the same chart area width as the control for .  axis alignment.  
                    'width': '100%',      
                    'height': '100%',      
                    'hAxis': { 'title': 'DATES', 'gridlines': { 'color': 'transparent' }, 'ticks': hTicks, 'slantedText': true, 'slantedTextAngle': hTicks.length <= 10 ? 45 : 90 },      
                    'legend': 'none',      
                    'vAxis': { 'title': 'CABINS', 'viewWindow': { 'min': 0, 'max': (Number(cabinTotal) * 1.5) } },      
                    'seriesType': 'bars',      
                    'chartArea': { 'height': '50%', 'width': '85%' },      
                    'bar': { 'groupWidth': '15%' },      
                    'series': { 4: { 'type': 'line' } },      
                    'isStacked': true,      
                    'colors': ['#95d631', '#d7d7d7', '#f44336',       '#00bcd4', '#ffc107']      
                }      

以下是图表

勾选选项的图表 图表无刻度选项

charts google-visualization data-visualization
1个回答
0
投票

解决了当用户滑动chartFilter时动态更新ticks的问题。

© www.soinside.com 2019 - 2024. All rights reserved.