javascript - Google 图表、更改图表类型以及显示/隐藏列

Question

我正在处理 Google 图表。

要求:

• 我想要 Google 图表名称的下拉列表。
• 我需要列的复选框。

我创建了一个包含两个按钮的页面，每个按钮对应一种图表类型。我在显示/隐藏列时遇到问题。

代码

<input type='button' id='b1' value='Draw Column Chart' />
<input type='button' id='b2' value='Draw Line Chart' />
<input type='checkbox' value='Selling Price' />Selling Price
<input type='checkbox' value='Listing Price' />Listing Price

<div id="chart-div"></div>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
// Load the Visualization API and the piechart package.
var mydata='{"cols":[{"type":"date","label":"Date"}, 
    {"type":"number","label":"Selling Price"},
    {"type":"number","label":"Listing Price"}],
       "rows":[{"c":[{"v":"Date(2015,03,02)"},
           {"v":59900,"f":"$59,900"},{"v":59900,"f":"$59,900"}]},
           {"c":[{"v":"Date(2015,03,23)"},{"v":435148,"f":"$435,148"},
           {"v":435148,"f":"$435,148"}]},{"c":[{"v":"Date(2015,02,13)"},
           {"v":144900,"f":"$144,900"},{"v":144900,"f":"$144,900"}]},
           {"c":[{"v":"Date(2015,03,31)"},{"v":140888,"f":"$140,888"},
           {"v":149888,"f":"$149,888"}]},{"c":[{"v":"Date(2015,02,27)"},
           {"v":378528,"f":"$378,529"},{"v":339000,"f":"$339,000"}]}]}'; 

google.load('visualization', '1.0', {
    'packages': ['corechart']
});

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(initialize);

function initialize() {

    var chart = new google.visualization.ChartWrapper({
        containerId: 'chart-div'
    });
    var data = [];
    data = new google.visualization.DataTable(mydata);


    var options = {
        width: 400,
        height: 240,
        vAxis: {
            minValue: 0,
            maxValue: 1000
        },
        animation: {
            duration: 1000,
            easing: 'out'
        }
    };

    var barsButton = document.getElementById('b1');
    var lineButton = document.getElementById('b2');

    chart.setOptions(options);

    function drawBars() {
        chart.setChartType('ColumnChart');
        chart.setDataTable(data);
        chart.draw();
    }

    function drawLine() {
        chart.setChartType('LineChart');
        chart.setDataTable(data);
        chart.draw();
    }

    barsButton.onclick = function () {
        drawBars();
    }

    lineButton.onclick = function () {
        drawLine();
    }
    drawBars();
}

http://jsfiddle.net/IsmailRavian/qh90ua7y/1/

我需要帮助:

• 将按钮转换为下拉菜单
• 功能复选框

Answer 1

希望这对您有帮助。

        google.load('visualization', '1', {packages: ['corechart']});
       
google.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Date', 'firstdata', 'second', 'third'],
                ['2015-04-08',  2842, 208, 934],['2015-04-09',  2835, 209, 936],['2015-04-10',  2899, 208, 936],['2015-04-11',  2910, 208, 937],['2015-04-12',  2929, 207, 937],['2015-04-13',  2921, 207, 937],['2015-04-14',  2946, 207, 937],['2015-04-15',  2932, 208, 937],['2015-04-16',  2963, 208, 939],['2015-04-17',  2966, 207, 939],['2015-04-18',  2991, 206, 939],['2015-04-19',  3025, 206, 940],['2015-04-20',  3014, 206, 940],['2015-04-21',  3042, 206, 941],['2015-04-22',  3058, 206, 941],['2015-04-23',  3060, 206, 941],            ]);

            var options = {
                chart: {
                    title: 'The test ',
                    subtitle: '3 data'
                },
                width: 900,
                height: 500
            };

            data.addColumn({type: 'string', role: 'annotation'});
            var view = new google.visualization.DataView(data);
            view.setColumns([0, 1,
                { calc: "stringify",
                    sourceColumn: 1,
                    type: "string",
                    role: "annotation" },2,
                { calc: "stringify",
                    sourceColumn: 2,
                    type: "string",
                    role: "annotation" },3,
                { calc: "stringify",
                    sourceColumn: 3,
                    type: "string",
                    role: "annotation" }]);

            var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

            chart.draw(view, options);
                    $(document).ready(function () {
                // do stuff on "ready" event
                $(".checkbox").change(function() {

                    view = new google.visualization.DataView(data);
                    var tes =[0];

                    if($("#kolom1").is(':checked')) {

                        tes.push(1,
                            { calc: "stringify",
                                sourceColumn: 1,
                                type: "string",
                                role: "annotation" });                    }
                    if($("#kolom2").is(':checked'))
                    {
                        tes.push(2,
                            { calc: "stringify",
                                sourceColumn: 2,
                                type: "string",
                                role: "annotation" });
                    }
                    if($("#kolom3").is(':checked'))
                    {
                        tes.push(3,
                            { calc: "stringify",
                                sourceColumn: 3,
                                type: "string",
                                role: "annotation" });
                    }
                    view.setColumns(tes);


                    chart.draw(view, options);

                });
            });

        }

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<div id="curve_chart" style="width: 900px; height: 500px"></div>

<input type="checkbox" class="checkbox"  id="kolom1" checked> one<br>
<input type="checkbox" class="checkbox"  id="kolom2" checked> two<br>
<input type="checkbox" class="checkbox"  id="kolom3" checked> three<br>
 </body>
</html>