Question

我正在使用Google图表的组合堆叠栏。我想显示H轴的显式值，所以我使用了ticks选项。但是，使用此选项后，我的图形将沿h轴一次显示所有条形值。但是，我想一次限制5条，并通过滑动charRangeFilter动态显示其余条。如图所示，当我使用刻度选项时，这些条几乎几乎显示为直线。有什么可以帮助我解决这个问题的吗？任何帮助都将受到高度赞赏

下面是图表选项的代码

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']      
                }

下面是图表

Chart with Tick option Chart Without Tick option

Answer 1

通过在用户滑动chartFilter时动态更新刻度来解决

在H轴上使用刻度选项时出现的问题：Google图表

1 个答案: