用于绘制地图的JavaScript库

Question

我正在为销售公司建立仪表板，我需要在上面绘制印度地图。它应根据该区域的销售情况突出显示地图上的不同状态。请建议合适的JS库，这些库可以提供帮助。

Answer 1

使用amCharts动态绘制地图。

它允许使用amCharts库添加交互式图表和地图

Demo

www.amCharts.com

Answer 2

为此项目选择合适的JS库将取决于找到一个允许您在地理上绘制销售数据的库。您可能会选择几个地图选项：

• GIS地图（可能比您需要的更复杂）
• 地图，它们只是代表与您所在地区相似的形状的图像（即印度和印度各州）
• 使用实际纬度和经度数据绘制的地图（看起来最适合您）

纬度和经度数据图的好处是能够根据地理信息准确地绘制数据。我个人有ZingChart的经验，ZingChart是一个JavaScript库，提供纬度和经度地图（印度作为一个国家，以及印度各州的深入水平）。

以下是它的外观演示 - http://zingchart.com/playground/run/54077e9d8cd24

以下是我认为您想要做的地图突出显示类型示例 - http://www.zingchart.com/gallery/?ID=25586

如果你需要印度的下一级州，ZingChart的人也可能会满足这个要求。作为团队成员，我很乐意为您提供帮助，如果您有其他问题，请与我们联系。

Answer 3

JSMaps是另一个选项，它是带有MIT license

的开源项目

India Map

Answer 4

highcharts.com是您正在寻找的服务的一种解决方案。

以下是印度人口的实施示例，可以很容易地替换为该地区的销售。

完整示例可在以下jsFiddle

中找到

// Initiate the chart
$('#container').highcharts('Map', {
    title : {
        text : 'Highmaps basic demo'
    },
    subtitle : {
        text : 'Source map: <a href="https://code.highcharts.com/mapdata/countries/in/in-all.js">India</a>'
    },
    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },
    colorAxis: {
        min: 0
    },
    series : [{
        data : data,
        mapData: Highcharts.maps['countries/in/in-all'],
        joinBy: 'hc-key',
        name: 'Random data',
        states: {
            hover: {
                color: '#BADA55'
            }
        },
        dataLabels: {
            enabled: true,
            format: '{point.name}'
        }
    }]
});