国家/地区名称未在geochart上显示

时间:2017-03-19 18:01:15

标签: javascript java google-visualization

这是我的代码



private boolean matchIdsAndStatuses(List<Item> items, ItemResponse currentItemResponse, StatusValue statusValue) {
     boolean isMatched = false;
     if (CollectionUtils.isNonEmpty(items)) {

         // Set of currentItemResponse ids
         Set<Map.Entry<String, Status>> itemIds = currentItemResponse.getMapIdsAndStatuses().entrySet();

         // List of inner items ids
         List<String> innerItemIds =
             items.stream().map(ItemBase::getInnerId).collect(Collectors.toList());

         // Do we rewrite following block of code in Java 8 style?
         // Iterate through inner items ids
         for (String innerItemId: innerItemIds) {

             // Iterate through currentItemResponse ids
             for (Map.Entry<String, Status> itemId: itemIds) {

                 // Check if innerItemIds and statuses were matched
                 if (Objects.equals(innerItemId, itemId.getKey())
                     && itemId.getValue().getStatusValue().equals(status)) {
                     isMatched = true;
                     break;
                 } else {
                     isMatched = false;
                 }
             }
         }
     }
     return isMatched;
 }
&#13;
&#13;
&#13;

和电子表格https://docs.google.com/spreadsheets/d/1dTfxVvfDKn6iXn4W_m7HJ_86JOGNDsxYSSaXipEo0vM/edit#gid=0

我不知道为什么第一列中的国家/地区名称未显示在geochart上 以及如何自定义工具提示,例如..添加换行符而不是冒号(:)我试过br /但它没有工作

任何人都可以提供帮助吗?

谢谢

1 个答案:

答案 0 :(得分:0)

将以下属性添加到计算的视图字段...

role: 'tooltip',
p: {html: true}

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawVisualization,
  packages:['geochart']
});

function drawVisualization() {
  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1dTfxVvfDKn6iXn4W_m7HJ_86JOGNDsxYSSaXipEo0vM/edit#gid=0');
  query.send(handleQueryResponseTR);
}

function handleQueryResponseTR(response) {
  if (response.isError()) {
    console.log('Error in query: ' + response.getMessage() + ' ' +      response.getDetailedMessage());
    return;
  }

  var options = {
    backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 },
    colorAxis:  {colors: ['#D95F0E','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FEC44F','#FFF7BC','#FFF7BC','#FFF7BC','#FFF7BC',]},
    backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 },
    datalessRegionColor: '#F5F0E7',
    displayMode: 'regions',
    enableRegionInteractivity: 'true',
    resolution: 'countries',
    sizeAxis: {minValue: 1, maxValue:1,minSize:10,  maxSize: 10},
    region:'world',
    keepAspectRatio: true,
    width:800,
    height:600,
    tooltip: {isHtml:'true',textStyle: {color: '#444444'}, trigger:'focus'}
  };

  var data = response.getDataTable();
  var view = new google.visualization.DataView(data);
  view.setColumns([0, {
    type:'string',
    label : 'num of',
    calc: function (dt, row) {
      return dt.getFormattedValue(row, 1) + ':  (' + dt.getFormattedValue(row, 2) + ' .)'
    },
    role: 'tooltip',
    p: {html: true}
  }]);
  var chart = new google.visualization.GeoChart(document.getElementById('visualization'));
  chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id='visualization'></div>