국가 별 지리 차트

상태에 따라 미국이 분리 된 이미지 인 지리 차트와 같은 차트를 구현해야합니다. 그런 다음 각 상태에 대한 데이터를 기반으로 차트에 색상별로 상태가 표시됩니다. 상태의 제품의 수> (20), 다음 GREEN 색상으로 그 상태를 표시하거나 다른, 내가 어떤 생각 방법이 없다국가 별 지리 차트

지금까지 RED 색상을 표시하는 경우 예를 들어 우리는

California : 20 products 
Texas: 100 products 
Ohio: 5 products 
.....

는이 그것을하기 위해. 나는 미국지도를 50 개로 나누고 색깔을 지정하려고하지만 효과가 없습니다.

출처

2014-03-28 Peter Phan

Google 지오 차트와 같은 일부 지리 차트 프레임 워크가 있지만 완전히 사용자 정의 할 수있는 것은 아닙니다.

하지만 jVectorMap 프레임 워크를 사용하면됩니다. jVectorMap 1.2.2, 일부 map of the USA가 (필자는 메르카토르를 사용 선택 다운로드 다음과 같은 코드를 사용할 수 있습니다.

<head> 
    <link rel="stylesheet" href="jquery-jvectormap-1.2.2.css" type="text/css" /> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js"></script> 
    <script type="text/javascript" src="jquery-jvectormap-1.2.2.min.js"></script> 
    <script type="text/javascript" src="http://jvectormap.com/js/jquery-jvectormap-us-merc-en.js"></script> 
    <script type="text/javascript"> 
    $(function(){ 
     var data = { "US-CA": 20, "US-TX": 100, "US-OH": 5 }; 
     var colors = {}; 
     // create an object with colors 
     for (var key in data) { 
      var value = data[key]; 
      colors[value] = value > 20 ? "#00FF00" : "#FF0000"; 
     } 

     $('#map_canvas').vectorMap({ 
      map: 'us_merc_en', 
      series: { 
       regions: [{ 
        values: data, 
        scale: colors 
       }] 
      } 
     }); 
    }); 
    </script> 
</head> 
<body> 
    <div id="map_canvas" style="width: 400px; height: 300px;"></div> 
</body>

for 루프의 일부를 할당 색상 때문에 프레임 워크의 일부 한계 상당히 까다 롭습니다 또한 하지만 US-CA과 같은 특수한 이름이 필요합니다. 그러나 결과적으로 오하이오 주와 텍사스와 레드 캘리포니아는 녹색으로 표시됩니다.

프레임 워크는 오픈 소스이며 더 복잡한 기능이 필요한 경우 직접 코드를 업데이트 할 수 있습니다.

출처

2014-03-28 12:05:38 vorrtex

많은 분들께 감사드립니다. Vorrtex, 정확히 내가 찾고있는 것입니다. –

답변

관련 문제