1

Google API を使用して折れ線グラフを描画しました。しかし、JavaScriptでリストボックスを使って複数折れ線グラフの表示/非表示機能をしたいです。チャートには、選択された線のみが表示されます。ここに私のコードがありますが、機能していません。チェックを手伝ってもらえますか？どうもありがとうございます。

<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(init);
    function init(){
        var rowData1 = [['Year', 'Sales']
                        ['2003',  100.00],
                        ['2004',  90.29],
                        ['2005',  241.03],
                        ['2006',  134.61],
                        ['2007',  151.06],
                        ['2008',  133.96],
                        ['2009',  103.20,],
                        ['2010',  110.00],
                        ['2011',  115.53],
                        ['2012',  242.44],];

        var rowData2 = [['Year', 'Marketing'],
                        ['2003',  100.00],
                        ['2004',  94.22],
                        ['2005',  81.85],
                        ['2006',  108.01],
                        ['2007',  88.44],
                        ['2008',  88.07],
                        ['2009',  108.40],
                        ['2010',  149.01],
                        ['2011',  156.29],
                        ['2012',  130.15],];

        var rowData3 = [['Year', 'Expenses'],
                        ['2003',  100.00],
                        ['2004',  194.22],
                        ['2005',  41.85],
                        ['2006',  128.01],
                        ['2007',  98.44],
                        ['2008',  128.07],
                        ['2009',  148.40],
                        ['2010',  139.01],
                        ['2011',  196.29],
                        ['2012',  230.15],];


        //var data = [];
        //data[0] = google.visualization.arrayToDataTable(rowData1);
        //data[1] = google.visualization.arrayToDataTable(rowData2);
        //data[2] = google.visualization.arrayToDataTable(rowData3);

        var options = {
          width: 700,
          height: 400,
          vAxis: {title: "Amount"},
          hAxis: {title: "Year"},
          animation:{
            duration: 1000,
            easing: 'out'
          },
        };
    }

    function drawMultiChart(){
        var listBox=document.getElementById("selectMultiple");
        var count=0;
        var itemToDraw=Array();
            itemToDraw(0) = google.visualization.arrayToDataTable(rowData1);
            itemToDraw(1) = google.visualization.arrayToDataTable(rowData2);
            itemToDraw(2) = google.visualization.arrayToDataTable(rowData3);

        for (var i=0;i<listBox.options.length;i++){
            if (listBox.options[i].selected==true){
                itemToDraw.push(listBox.options[i].value);
            }
        }

        for (var j=0;j<itemToDraw.length;j++){
            count+=drawOneByOne(listBox,itemToDraw[j]);
        }
    }

    function drawOneByOne(listBox,itamToDraw){
        var drawed=0;
        for(var k=0;k<listBox.options.length;k++){
            if(listBox.options[k].value==itemToDraw){
                var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
                chart.draw(data, options);
                view = new google.visualization.DataView(data);
                chart.draw(data, options);
                drawed =1;
                break;  
            }
        }
        return drawed;              
    }
</script>


<body>  
<div id="chart_div" style="width: 900px; height: 500px;"></div>
    <table border="0"> 
    <tr>
        <td align="right">Select One Industry</td>
        <td align="left">
            <select name="selectMultiple" size="10" multiple="multiple" id="selectMultiple">
                <option value="Sales">Sales</option>
                <option value="Marketing">Marketing</option>
                <option value="Expenses">Expenses</option>
            </select>
        </td>
    </tr>

    <tr>
        <td align="right">&nbsp;</td>
        <td align="left"><input name="submitBtn" type="button" id="submitBtn" value="Submit" onclick="javaScript:drawMultiChart();" /></td>
    </tr>
    </table>

4

0 に答える 0