标记错位

时间:2013-07-13 08:48:07

标签: javascript google-visualization

我的数据表:

Country                        Types of sales   Total sales($)  Name                                State       
United states of America           chemicals    12662871    Obama                                GA 
United states of America           electronics  20145684    Romney                               ON 
United states of America           textiles     22458756    Gliton                               MB 
United states of America           automobiles  34235684    Andrew Jackson                       BC 
United states of America           chemicals    19438333    James Madison                       AB  

如果我给出名称Column,而不是给出状态列,那么名称也会在地址图中绘制,就像在附件文件中一样。

只有在displayMode为Marker时才会发生这种情况。

Javascript代码:

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>Google Visualization API Sample</title>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

    function drawMarkersMap() {

        var data = google.visualization.arrayToDataTable([

        ['Name', 'Total Sales'],
        ['Romney', 20145684],
        ['Obama', 12662871],
        ['Gliton', 22458756],
        ['Andrew Jackson', 34235684],
        ['James Madison', 19438333]
    ]);

        var options = {

            region: 'US',
            resolution: 'provinces',
            displayMode:'markers',
            width: 400,
            height: 400,
            colorAxis: {
                //values: [-1, 0, 1],
                colors: ['#FF0000']
            }
        };

        var geochart = new google.visualization.GeoChart(document.getElementById('visualization'));

        geochart.draw(data, options);

        google.visualization.events.addListener(geochart, 'select', function (eventOption) {

            var item = geochart.getSelection();


            var value = data.getValue(item[0].row, 1);

            alert(value);
        });
    }

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

    google.setOnLoadCallback(drawMarkersMap);


</script>

</head>

<body style="font-family: Arial;border: 0 none;">

<div id="visualization"></div>

</body>

</html>

请提供解决方案。

先谢谢。

1 个答案:

答案 0 :(得分:0)

假设您希望将每个人显示为负责某个州,并将其名称显示为悬停,如下所示:

Geochart Sample

您可以使用{v:'value',f:'format'}表示法使用此类代码实现此目的:

function drawVisualization() {
  var data = new google.visualization.DataTable();
  data.addColumn('string','Name');
  data.addColumn('number','Sales');
  data.addRows([
    [{v:'MA',f:'Romney'}, 20145684],
    [{v:'IL',f:'Obama'}, 12662871],
    [{v:'NH',f:'Gliton'}, 22458756],
    [{v:'TN',f:'Andrew Jackson'}, 34235684],
    [{v:'VA',f:'James Madison'}, 19438333]
  ]);

  var options = {
    region: 'US',
    resolution: 'provinces',
    width: 600,
    height: 400
  };

var chart = new google.visualization.GeoChart(document.getElementById('visualization'));   chart.draw(数据,选项); };