Question

我试图将一些json嵌入我的amcharts中。这是javascript中的html代码：

<script type="text/javascript">
    AmCharts.makeChart("mapdiv", {
  "type": "map",
  "imagesSettings": {
    "rollOverColor": "#089282",
    "rollOverScale": 1,
    "selectedScale": 0.5,
    "selectedColor": "#089282",
    "color": "#13564e",
    "selectable": false,
    "bringForwardOnHover": false
  },
  "areasSettings": {
    "color": "#D3D3D3",
    "autoZoom": true
  },  
  "data": {
    "map": "puertoRicoHigh"
  },
  "dataLoader": {
    "url": "http://OurServer/Service1.svc/GetLocations",
    "format": "json",
    "showErrors": true,
    "postProcess": function(data, config, map) {
      // create a new dataProvider
      var mapData = map.data;

      // init images array
      if (mapData.images === undefined)
        mapData.images = [];

      // create images out of loaded data
      for(var i = 0; i < data.length; i++) {
        var image = data[i];
        image.type = "circle";
        mapData.images.push(image);
      }
      return mapData;
    }
  }
});
</script>

这就是json的样子：[{"title":"Site1","latitude":18.37,"longitude":-67.18},{"title":"Site2","latitude":18.20,"longitude":-65.80}]

我一直在尝试将此json嵌入代码中，但我遇到了麻烦。

我尝试使用dataprovider代替dataloader，因为它不是http请求，但我知道我错过了一些内容：

<script type="text/javascript">
    AmCharts.makeChart("mapdiv", {
  "type": "map",
  "imagesSettings": {
    "rollOverColor": "#089282",
    "rollOverScale": 1,
    "selectedScale": 0.5,
    "selectedColor": "#089282",
    "color": "#13564e",
    "selectable": false,
    "bringForwardOnHover": false
  },
  "areasSettings": {
    "color": "#D3D3D3",
    "autoZoom": true
  },  
  "data": {
    "map": "puertoRicoHigh"
  },
    "dataProvider": [{"title":"Site1","latitude":18.3764,"longitude":-67.1819},{"title":"Site2","latitude":18.2001,"longitude":-65.8081}],  
    "postProcess": function(data, config, map) {
      // create a new dataProvider
      var mapData = map.data;

      // init images array
      if (mapData.images === undefined)
        mapData.images = [];

      // create images out of loaded data
      for(var i = 0; i < data.length; i++) {
        var image = data[i];
        image.type = "circle";
        mapData.images.push(image);
      }
      return mapData;
    }  
});
</script>

Answer 1

地图dataProvider是object，而不是数组，其结构在map demos on the AmCharts website上展示。由于您的JSON基本上是map images的数组，通过postProcess方法，您可以像这样重构dataProvider，为每个图像添加type: "circle"并跳过进一步处理的需要：

dataProvider: {
  map: "puertoRicoHigh",
  images: [
    {"title":"Site1","latitude":18.3764,"longitude":-67.1819, "type": "circle"},
    {"title":"Site2","latitude":18.2001,"longitude":-65.8081, "type": "circle"}
  ]
}

演示：

AmCharts.makeChart("mapdiv", {
  "type": "map",
  "imagesSettings": {
    "rollOverColor": "#089282",
    "rollOverScale": 1,
    "selectedScale": 0.5,
    "selectedColor": "#089282",
    "color": "#13564e",
    "selectable": false,
    "bringForwardOnHover": false
  },
  "areasSettings": {
    "color": "#D3D3D3",
    "autoZoom": true
  },
  "dataProvider": {
    "map": "puertoRicoHigh",
    "images": [{
        "title": "Site1",
        "latitude": 18.3764,
        "longitude": -67.1819,
        "type": "circle"
      },
      {
        "title": "Site2",
        "latitude": 18.2001,
        "longitude": -65.8081,
        "type": "circle"
      }
    ]
  }
});

<script src="//www.amcharts.com/lib/3/ammap.js"></script>
<script src="//www.amcharts.com/lib/3/maps/js/puertoRicoHigh.js"></script>
<div id="mapdiv" style="width: 100%; height: 400px;"></div>

在amchart图表中嵌入json字符串？

1 个答案: