Question

我有以下单选按钮div

<div id="regionbutton">
  <div id="radio1"><input type="radio" name="region" id="all" value="all" /><label for="all">All</label></div>
  <div id="radio2"><input type="radio" name="region" id="africa" value="002" /><label for="africa">Africa</label></div>
  <div id="radio3"><input type="radio" name="region" id="americas" value="019" /><label for="americas">Americas</label></div>
  <div id="radio4"><input type="radio" name="region" id="europe" value="150" /><label for="europe">Europe</label></div>
  <div id="radio5"><input type="radio" name="region" id="asia" value="142" /><label for="asia">Asia/Middle East</label></div>
</div>

当选择每个按钮时，它会将每个按钮的'region'值更改为geochart的选项以显示不同的区域。

并且代码是......

var regions = document.getElementsByName('region');
var defaultRegion = null;
for (var i = 0; i < regions.length; i++) {
  regions[i].addEventListener('click', drawChart, false);
  if (regions[i].checked) {
    defaultRegion = regions[i];
  }
}
if ((defaultRegion === null) && (regions.length > 0)) {
  defaultRegion = regions[0];
  defaultRegion.checked = true;
}
drawChart({
  target: defaultRegion
});

// radio on 'click' handler
function drawChart(sender) {
  options.region = null;
  if (sender.target.value !== 'all') {
    options.region = sender.target.value;
  }

和geochart选项的代码

var options = {
  displayMode: 'regions',
  legend: 'none',
  enableRegionInteractivity: 'true',
  resolution: 'countries',
  **region: 'null',
  keepAspectRatio: false,
  width: 800,
  height: 480,
  tooltip: {
    isHtml: 'true',
  }
};

但重点是，如果有值显示在该区域，我怎么才能显示单选按钮。是否有可能我们可以检查是否对该地区的国家/地区有价值，然后显示要选择的单选按钮。但如果没有任何价值，**不显示单选按钮进行选择。**

现在我创建的geochart看起来像这样

但是对于非洲地区，我们没有任何关于它的数据。所以它看起来像

我知道我可以把非洲分开，但它将来可以有任何数据。

那么无论如何检查数据然后显示单选按钮来选择？

更多信息： 我从Google工作表中查询数据*您可以在下面看到我的整个代码

google.charts.load('current', {
  packages: ["geochart"]
});

google.charts.setOnLoadCallback(drawRegionsMap);

var data1;

function handleQueryResponseTR1(response1) {
  if (response1.isError()) {
    alert('Error in query: ' + response1.getMessage() + ' ' + response1.getDetailedMessage());
    return;
  }
  data1 = response1.getDataTable();
  var colorValues = [];
  var numRows = data1.getNumberOfRows();
  for (var i = 0; i < numRows; i++) {
    colorValues.push(parseInt(data1.getValue(i, 15)));
  }
  //assign color to colorValues
  var colorNames = [];
  colorValues.forEach(function(value) {
    if (value <= 1) {
      colorNames.push('#fff09b');
    } else if ((value > 1) && (value <= 2)) {
      colorNames.push('#ffff9b');
    } else if ((value > 2) && (value <= 3)) {
      colorNames.push('#91c1ff');
    } else if ((value > 3) && (value <= 4)) {
      colorNames.push('#3da9ec');
    } else if ((value > 4) && (value <= 5)) {
      colorNames.push('#dfa6ff');
    } else if ((value > 5) && (value <= 6)) {
      colorNames.push('#c1b8b8');
    } else if ((value > 6) && (value <= 7)) {
      colorNames.push('#9edae5');
    } else if ((value > 7) && (value <= 8)) {
      colorNames.push('#d1d19d');
    } else if ((value > 8) && (value <= 9)) {
      colorNames.push('#9edae5');
    } else if ((value > 9) && (value <= 10)) {
      colorNames.push('#9edae5');
    } else if ((value > 10) && (value <= 11)) {
      colorNames.push('#98df8a');
    } else if ((value > 11) && (value <= 12)) {
      colorNames.push('#ffaf87');
    } else {
      colorNames.push('#ffaf87');
    }
  });
  var view1 = new google.visualization.DataView(data1);
  view1.setColumns([16, 15,
    {
      type: 'string',
      role: 'tooltip',
      properties: {
        html: true
      },
      calc: function(dt, row) {
        var country = dt.getFormattedValue(row, 5)
        var policy = dt.getFormattedValue(row, 6)
        var dataname = dt.getFormattedValue(row, 8)
        var dropname = dt.getFormattedValue(row, 9)
        var startdate = dt.getFormattedValue(row, 10)
        var comment = dt.getFormattedValue(row, 12)

        return '<br><div id="country">' + country + " - " + policy + '<br><br></div> ' +
          '<div id="header1">Dominant (E)PR policy model:<br></div>' +
          '<div id="dropname">' + dropname + '<br><br></div>' +
          '<div id ="header2">Since :&nbsp;</div><div id="date">' + startdate + '</div><br><br><br>' +
          '<div id ="comment">' + comment + '<\/div>'
      },

    }
  ]);
  var chart1 = new google.visualization.GeoChart(document.getElementById('colormap1'));

  google.visualization.events.addListener(chart1, 'select', function() {
    var selection = chart1.getSelection();
    var cnid = data1.getValue(selection[0].row, 0);
    var polid = data1.getValue(selection[0].row, 1);
    var strid = data1.getValue(selection[0].row, 2);
    var sid = (strid) - 1;

    var statecode = data1.getValue(selection[0].row, 4);
    if (selection.length > 0) {
      //http://www.sagisepr.com/country.php?country=21&polsel=1&sid=17&statecode=AR
      window.open("http://www.sagisepr.com/country.php?country=" + cnid + "&polsel=" + polid + "&sid=" + sid + "&statecode=" + statecode);
    }
  });

  var options1 = {


    colorAxis: {
      colors: colorNames,
      values: colorValues
    },


    backgroundColor: {
      fill: '#FFF'
    },
    datalessRegionColor: '#F5F0E7',
    displayMode: 'regions',
    legend: 'none',
    enableRegionInteractivity: 'true',
    resolution: 'countries',
    region: 'null',
    keepAspectRatio: false,
    width: 800,
    height: 480,
    tooltip: {
      isHtml: 'true',
      textStyle: {
        color: '#444444'
      },
      showTitle: false
    }
  };
  //radio button

  // init regions
  var regions = document.getElementsByName('region');
  var defaultRegion = null;
  for (var i = 0; i < regions.length; i++) {
    regions[i].addEventListener('click', drawChart, false);
    if (regions[i].checked) {
      defaultRegion = regions[i];
      //console.log(regions[i]);
    }
  }
  if ((defaultRegion === null) && (regions.length > 0)) {
    defaultRegion = regions[0];
    defaultRegion.checked = true;
  }
  drawChart({
    target: defaultRegion
  });


  // radio on 'click' handler
  function drawChart(sender) {
    options1.region = null;
    if (sender.target.value !== 'all') {
      options1.region = sender.target.value;

    }
    chart1.draw(view1, options1);
  }

  function drawRegionsMap() {
    var query1 = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1wb0c-eqinhLFgpxuJXKcjdbrnRYaHgqLcsjQerYvl-Q/edit#gid=0");

    query1.send(handleQueryResponseTR1);

  }

如何在有价值时显示单选按钮（geochart）

0 个答案: