Amcharts가 balloonText 값이 가장 높음

Question

Amcharts 플러그인의 3D Stacked Column Chart를 사용하고 있습니다. 출력은 정확하지만 막대 그래프에서 가장 높은 값을 볼 수 없습니다.

최대 값으로 마우스를 가져 가려고하면 레이블이 표시되지 않습니다. 다음은 amcharts 스크립트입니다.

var chart = AmCharts.makeChart("chartdiv", { 
      "theme": "light", 
      "labelText": "[[title]]: [[value]]", 
      "type": "serial", 
      "titles": [{ 
       "text": "Benches Classification by Borough", 
       "size": 16 
      }], 
      "valueAxes": [{ 
       "stackType": "3d", 
       "unit": "", 
       "position": "left", 
       "title": "Bench Counts:", 
      }], 
      "startDuration": 1, 
      "graphs": [ 
      { 
       "balloonText": "backless : [[value]]", 
       "fillAlphas": 0.9, 
       "lineAlpha": 0.2, 
       "title": "backless", 
       "type": "column", 
       "valueField": "backless" 
      }, 
      { 
       "balloonText": "backed:[[value]]", 
       "fillAlphas": 0.9, 
       "lineAlpha": 0.2, 
       "title": "backed", 
       "type": "column", 
       "valueField": "backed" 
      }], 

      "plotAreaFillAlphas": 0.1, 
      "depth3D": 73, 
      "angle": 60, 
      "categoryField": "Borough", 
      "categoryAxis": { 
       "gridPosition": "start" 
      }, 
      "export": { 
       "enabled": true 
      } 
     }); 

Answer 1

기본 동작은 풍선이없는 경우 풍선을 표시하지 않는 것입니다. 3 차원 차트는 좀 더 필요합니다. 값 축의 최대 값을 높이려면 값 축의 minMaxMultiplier을 작은 값으로 설정하여이 문제를 해결할 수 있습니다. 음수 축을 피하기 위해 데이터가 항상 양수이면 minimum을 강제로 0으로 설정하려고합니다.

var chart = AmCharts.makeChart("chartdiv", { 
 
    "theme": "light", 
 
    "labelText": "[[title]]: [[value]]", 
 
    "type": "serial", 
 
    "dataProvider": [{ 
 
     "backed": 113, 
 
     "backless": 56, 
 
     "Borough": "Manhattan" 
 
    }, 
 
    { 
 
     "backed": 190, 
 
     "backless": 64, 
 
     "Borough": "Bronx" 
 
    }, 
 
    { 
 
     "backed": 127, 
 
     "backless": 38, 
 
     "Borough": "Brooklyn" 
 
    }, 
 
    { 
 
     "backed": 135, 
 
     "backless": 50, 
 
     "Borough": "Queens" 
 
    }, 
 
    { 
 
     "backed": 105, 
 
     "backless": 31, 
 
     "Borough": "Staten Island" 
 
    } 
 
    //Lower Manhattan is not a separate borough ;) 
 
    ], 
 
    "titles": [{ 
 
    "text": "Benches Classification by Borough", 
 
    "size": 16 
 
    }], 
 
    "valueAxes": [{ 
 
    "stackType": "3d", 
 
    "unit": "", 
 
    "position": "left", 
 
    "title": "Bench Counts:", 
 
    "minMaxMultiplier": 1.05, 
 
    "minimum": 0 
 
    }], 
 
    "startDuration": 1, 
 
    "graphs": [{ 
 
     "balloonText": "backless : [[value]]", 
 
     "fillAlphas": 0.9, 
 
     "lineAlpha": 0.2, 
 
     "title": "backless", 
 
     "type": "column", 
 
     "valueField": "backless" 
 
    }, 
 
    { 
 
     "balloonText": "backed:[[value]]", 
 
     "fillAlphas": 0.9, 
 
     "lineAlpha": 0.2, 
 
     "title": "backed", 
 
     "type": "column", 
 
     "valueField": "backed" 
 
    } 
 
    ], 
 

 
    "plotAreaFillAlphas": 0.1, 
 
    "depth3D": 73, 
 
    "angle": 60, 
 
    "categoryField": "Borough", 
 
    "categoryAxis": { 
 
    "gridPosition": "start" 
 
    }, 
 
    "export": { 
 
    "enabled": true 
 
    } 
 
});

<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script> 
 
<script type="text/javascript" src="//www.amcharts.com/lib/3/themes/light.js"></script> 
 
<div id="chartdiv" style="width: 100%; height: 300px"></div>

또 다른 대안은 외부 DIV를 사용하여 자신의 풍선을 만들고 풍선을 트리거 할 rollOverGraphItem 및 rollOutGraphItem 이벤트를 활용하는 것입니다. AmCharts의 knowledge base에이 예가 있습니다.

Answer 2

이 라벨 뷰 밖에있는 가능성이있다. 차트를 마우스 오른쪽 단추로 클릭하여 레이블이 있는지 확인할 수 있습니다.

상단에 여백을 추가해보세요.

chart.marginTop = 20;