1

すべての州を含むドロップダウンから米国の州を選択すると、その州が米国の地図で強調表示されます。Google Charts API の Geo Chart を使用してこれを達成したいと考えています。

それを達成しようとしている間、私はこのサンプルをGoogle Code Playground (既存のサンプルを編集できる場所) で試しました。

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
    ['Country'],
    ['US-AK' ],
    ['US-AZ' ],
    ['US-HI' ],

  ]);

  var geochart = new google.visualization.GeoChart(
      document.getElementById('visualization'));
  geochart.draw(data, {region:"US",legend:"none",width: 556, height: 347});
}

アラスカ (「US-AK」) とハワイ (「US-HI」) はマップに表示されますが、アリゾナ (「US-AZ」) は表示されません。アリゾナもハイライト表示するにはどうすればよいですか? また、ドロップダウン内の状態が選択されたときに動的に強調表示される状態を表示するという当初の目標についての指針も感謝します。

4

2 に答える 2

3

アリゾナ州がマップに表示されない理由はresolution、州のマップを取得するにはオプションを「州」に設定する必要があるためです。ドロップダウンを使用して選択した状態を強調表示するのはもう少し複雑ですが、確かに実行可能です。これを行う方法の 1 つを次に示します。あなたのJavaScriptで：

function drawChart () {
    var data = google.visualization.arrayToDataTable([
        ['State', ''],
        ['US-AK', 0],
        ['US-AZ', 0],
        ['US-HI', 0]
    ]);

    var geochart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    var options = {
        region:"US",
        legend:"none",
        width: 556,
        height: 347,
        resolution: 'provinces',
        colorAxis: {
            minValue: 0,
            maxValue: 1,
            colors: ['green', 'red']
        }
    };

    var stateSelector = document.querySelector('#state');    
    function updateChart () {
        var index = this.selectedIndex;
        var selectedState = this.options[index].value;

        var view = new google.visualization.DataView(data);
        view.setColumns([0, {
            type: 'number',
            calc: function (dt, row) {
                return (dt.getValue(row, 0) == selectedState) ? 1 : 0;
            }
        }]);

        geochart.draw(view, options);
    }

    if (document.addEventListener) {
        stateSelector.addEventListener('change', updateChart, false);
    }
    else if (document.attachEvent) {
        stateSelector.attachEvent('onchange', updateChart);
    }
    else {
        stateSelector.onchange = updateChart;
    }

    geochart.draw(data, options);
}
google.load('visualization', '1', {packages:['geochart'], callback: drawChart});

そして、あなたのHTMLで：

<select id="state">
    <option value="" selected="selected">Select a state to highlight</option>
    <option value="US-AK">Alaska</option>
    <option value="US-AZ">Arizona</option>
    <option value="US-HI">Hawaii</option>
</select>
<div id="chart_div"></div>

これは、あなたが遊ぶことができるこれのjsfiddleです：http://jsfiddle.net/asgallant/wwDyU/

于 2013-10-11T14:13:13.623 に答える