如何在谷歌图表中显示和隐藏传说

时间:2017-04-07 06:50:02

标签: javascript jquery google-visualization

有谁能告诉我哪个是显示/隐藏行图例的最佳方法(如果使用复选框来更改可见性)。

我应该在折线图中有最多7个传说。

我的代码如下:

function DrawGraph(chartsdata, title, charttype) {

    //debugger;
    google.charts.load('current', { 'packages': ['corechart'] });
    google.charts.setOnLoadCallback(DrawChart);

    function DrawChart() {
        var data = new google.visualization.DataTable();

        data.addColumn('string', '');
        data.addColumn('number', '');

        try {

            var data = google.visualization.arrayToDataTable(chartsdata);
        }
        catch (e) {
            //debugger;
            //document.writeln(e);
        }

        var optionsBar = {
            title: title,
            isStacked: true,
            hAxis: {
                type: "datetime",
                showTextEvery: 1,
                ticks: [2016,2017,2018,2019,2020,2021,2022,2023]
            },
            legend: {
                position: 'bottom',
                textStyle: { fontSize: 12 }
            }
        };

        var optionsLine = {
            title: title,
            //width: 500,
            seriesType: 'line',
            legend: {
                position: 'bottom',
                textStyle: { fontSize: 11 }
            }
        };

        if (charttype == "line") {
            var chart = new google.visualization.LineChart(document.getElementById('chartdiv'));
            chart.draw(data, optionsLine);
        }
        else {
            var chart = new google.visualization.ColumnChart(document.getElementById('chartdiv'));
            chart.draw(data, optionsBar);
        }
    }
}

1 个答案:

答案 0 :(得分:0)

使用none / bottom作为位置切换图例:

legend: {position: 'none'} //to hide