Question

数据图＆＃34; Getting started＆＃34;当用户将鼠标悬停在特定国家/地区时，页面上有一个关于自定义文本的部分。但是，他们通过对信息进行硬编码来实现这一目标：

<script>
    var map = new Datamap({
        element: document.getElementById('container'),
        fills: {
            HIGH: '#afafaf',
            LOW: '#123456',
            MEDIUM: 'blue',
            UNKNOWN: 'rgb(0,0,0)',
            defaultFill: 'green'
        },
        data: {
            IRL: {
                fillKey: 'LOW',
                numberOfThings: 2002
            },
            USA: {
                fillKey: 'MEDIUM',
                numberOfThings: 10381
            }
        },
        geographyConfig: {
            popupTemplate: function(geo, data) {
                return ['<div class="hoverinfo"><strong>',
                        'Number of things in ' + geo.properties.name,
                        ': ' + data.numberOfThings,
                        '</strong></div>'].join('');
            }
        }
    });
</script>

我想从外部.json文件加载该信息，以便我可以轻松更新它。我怎样才能做到这一点？我已经尝试设置dataURL，但是需要一个完整的topojson文件，我不需要更新。任何帮助非常感谢！

Answer 1

根级别的

dataUrl可以采用json或csv文件，如下例所示：http://bl.ocks.org/markmarkoh/11331459

      var election = new Datamap({
        scope: 'usa',
        element: document.getElementById('container1'),
        geographyConfig: {
          popupTemplate: function(geo, data) {
            return data && data.info && "<div class='hoverinfo'><strong>" + data.info + "</strong></div>";
          },
          highlightOnHover: false,
          borderColor: '#444',
          borderWidth: 0.5
        },
        dataUrl: 'data.json',
        dataType: 'json',
        data: {},
        fills: {
          'Visited': '#306596',
          'neato': '#0fa0fa',
          'Trouble': '#bada55',
          defaultFill: '#dddddd'
        }
      });

虽然data.json的资源如下：

{
  "NY": {"fillKey": "Visited", "anotherProperty": "Born here"},
  "TX": {"fillKey": "Visited", "anotherProperty": "Live here"},
  "CA": {"fillKey": "Visited", "anotherProperty": "Here while writing this code"}
}

从json文件加载弹出数据以获取数据映射

1 个答案: