0

クリックに基づいて (私の google.maps.event.addListener() を使用して) 2 つの行 (POTENTIAL_ と TOTAL_ROOF) からデータの縦棒グラフを作成しようとしています。

つまり、ユーザーのクリックに基づいて、基本的に 1 行のデータがグラフに表示されます。

雑草を取り除くのを手伝ってくれる人はいますか？....

私のフュージョン テーブルはこちら: https://www.google.com/fusiontables/DataSource?docid=1DGswslbC5ijqWHPJvOH1NH7vltkZIPURJun_L5I#rows:id=1

js関数1：

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

function drawVisualization() {
    var queryText = encodeURIComponent("SELECT POTENTIAL_, TOTAL_ROOF, BLDG_ID FROM 1DGswslbC5ijqWHPJvOH1NH7vltkZIPURJun_L5I");
    google.visualization.drawChart({
    "containerId" : "visualization_div",
    "dataSourceUrl" : 'https://www.google.com/fusiontables/DataSource?docid=',
    "query" : "SELECT POTENTIAL_, TOTAL_ROOF FROM 1DGswslbC5ijqWHPJvOH1NH7vltkZIPURJun_L5I",
    "chartType" : "ColumnChart"
    })};

js関数2:

// Function call: Click Listener on layer using jquery
             google.maps.event.addListener(layer, 'click', function(e, drawVisualization) {
             $("#roof-panel-area").html(
             '<p><strong>Total Roof Area (sqft)</strong>: ' + '&nbsp;&nbsp;' + Math.round(e.row['TOTAL_ROOF'].value) +
             '<br><strong> Potential Roof Area (sqft)</strong>:' + '&nbsp;&nbsp;' + Math.round(e.row['POTENTIAL_'].value) +
             '<br><strong> Pitched or Flat Roof (?)</strong>:'+ '&nbsp;&nbsp;' +  e.row['PITCHED_OR'].value +
             '<br><strong> # of Panels per Roof Area :</strong>' + '&nbsp;&nbsp;' + Math.round(e.row['NUMBER_OF_'].value) + '</p>');
            });

        layer.setMap(map);

html:

<div id="sidebar-content-area" style="padding:5px;">
    <div id="intro" style="text-align: center; margin-top: 20px; display: none;">
        <p><i>Buildings are symbolized according to roof size, and the possibility of increased panel placement.</i><p>
    </div>
<div id="overview" style:"">
    <h3>Building Overview:</h3>
<p id ="roof-panel-area"></p>
<div id = "visualization_div"></div>
</div>
4

2 に答える 2

0

素晴らしい。ありがとう！これが答えです：

js関数1:

function drawVisualization(e) {

        var data = google.visualization.arrayToDataTable([
          ['Area', 'Potential', 'Total'],
          ['Building',  Math.round(e.row['POTENTIAL_'].value), Math.round(e.row['TOTAL_ROOF'].value)],
        ]);

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('visualization_div'));
        chart.draw(data, options);
    };

js関数2:

             google.maps.event.addListener(layer, 'click', function(e) {
         $("#roof-panel-area").html(
         '<p><strong>Total Roof Area (sqft)</strong>: ' + '&nbsp;&nbsp;' + Math.round(e.row['TOTAL_ROOF'].value) + 
         '<br><strong> Potential Roof Area (sqft)</strong>:' + '&nbsp;&nbsp;' + Math.round(e.row['POTENTIAL_'].value) + 
         '<br><strong> Pitched or Flat Roof (?)</strong>:'+ '&nbsp;&nbsp;' +  e.row['PITCHED_OR'].value + 
         '<br><strong> # of Panels per Roof Area :</strong>' + '&nbsp;&nbsp;' + Math.round(e.row['NUMBER_OF_'].value) +
         '</p>');
         drawVisualization(e);
        });

    layer.setMap(map);

}

html

        <div id="overview" style:"">
        <h3>Building Overview:</h3>
    <p id ="roof-panel-area"></p>
    <div id = "visualization_div" style="align: center; width: 230px; height: 260px;"></div>
    </div>
于 2013-05-03T19:34:59.587 に答える
0

あなたの dataSourceUrl は間違ったエンドポイントを使用しています。

「http://www.google.com/fusiontables/gvizdata?tq= 」 (「 https://www.google.com/fusiontables/DataSource?docid= 」ではなく) を使用すると、少なくともグラフが表示されます。

FusionTables データからのグラフの作成に関する Fusion Tables 情報

実施例

于 2013-05-03T18:40:29.863 に答える