如何为Google Charts中的列选择/取消选择数据?

时间:2018-01-02 14:09:03

标签: javascript charts google-visualization

如何在图例中添加选择/取消选择要显示的数据的选择框?

例如,我想取消选择t2以不显示在堆积列中?

google.charts.load('current', {packages: ["corechart"]});

google.charts.setOnLoadCallback(drawChart)
            function drawChart() {
            var data = new google.visualization.DataTable();
                data.addColumn('string', 'Title');
                data.addColumn('number', 'T1');
                data.addColumn({type: 'string', role: 'annotation'});
                data.addColumn('number', 'T2');
                data.addColumn({type: 'string', role: 'annotation'});
                data.addColumn('number', 'T3');
                data.addColumn({type: 'string', role: 'annotation'});
                data.addColumn('number', 'T4');
                data.addColumn({type: 'string', role: 'annotation'});
                
                data.addRows([
                        ['Training', 3.02, '3.02', 6.01, '6.01', 3.03, '3.03', 2.91, '2.91']
                ]);
                
                 // Set chart options
                var options = {
                    annotations: {
                        textStyle: {
                            bold: true,
                            italic: true,
                            fontSize: 16,
                            fontColor: '#FFFFFF',
                        }
                    },
                    legend: {position: 'top', alignment: 'start', maxLines: 2},
                    'width': 800,
                    'height': 600,
                    'colors': ['#72A5AE','#B5A7D2','#881E13','#381E70']
                }
                
                var chart = new google.visualization.ColumnChart(document.getElementById('t1'));
                chart.draw(data, options);
                }
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="t1"></div>

0 个答案:

没有答案