在地图中显示条形图

Question

我使用地理图表来显示地图。在页面加载时，它从SQLServer获取数据，并根据逻辑显示地图内状态的不同颜色，如下图所示：

例如，如果我们举例说明在印度造成的死亡及其原因。 假设说X州的死亡率最高。所以它标有最高的颜色。这已经获得了。

要求：

现在死亡的原因很多可以说是自杀，自然，事故等等。我也可以从数据库中获取这些数据。我想在这张地图中放置一个条形图，就像下图中的条形图一样：

我有可能在地理图表中或使用任何其他方法吗？提前致谢

Answer 1

嗯，这很简单。
您需要一个您想要显示的区域的SVG地图（谷歌）。
然后，您可以在SVG地图上创建SVG矩形（图表中的不同颜色条）。

您可以使用inkScape准备地图，并为图表创建边界矩形。

由于SVG是一个简单的XML文件，如果您通过AJAX获取数据，则可以完全使用代码，甚至是javaScript。

绘制3个矩形如下：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   id="svg2"
   viewBox="0 0 744.09448819 1052.3622047"
   height="297mm"
   width="210mm">
  <defs id="defs4" />

  <g id="charts">
    <rect
       y="98.076492"
       x="82.857178"
       height="465.71429"
       width="125.71429"
       id="rect4140"
       style="opacity:0.72123892;fill:#d65757;fill-opacity:0.40211636;stroke:none;stroke-width:0.80000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <rect
       y="99.505066"
       x="242.85713"
       height="465.71429"
       width="125.71429"
       id="rect4140-2"
       style="opacity:0.72123892;fill:#6dd657;fill-opacity:0.40211636;stroke:none;stroke-width:0.80000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
    <rect
       y="93.790779"
       x="399.99997"
       height="465.71429"
       width="125.71429"
       id="rect4140-9"
       style="opacity:0.72123892;fill:#5e76ff;fill-opacity:0.40211636;stroke:none;stroke-width:0.80000001;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
  </g>
</svg>

如果你不想自己做所有的SVG编码，你可以使用像d3.js这样的库。

这是一个先进的例子：
http://bl.ocks.org/emeeks/4531633

如果您在服务器上执行此操作，则可以将SVG转换为PNG，并将其显示给用户（如果他们仍使用IE8）。
有关更多信息，请参见此处：
Converting SVG to PNG using C#