amcharts의 직렬 차트에 사용자 정의 y 축 레이블을 추가하려면 어떻게해야합니까?

Question

나는 기본적으로이 차트의 변형 만들고있어 : https://www.amcharts.com/demos/reversed-value-axis/

워드 프로세서를 통해 찾고를 나는 "가이드"를 작성하여 제외하고 내 자신의 사용자 정의 y 축 단계와 레이블을 추가 할 수있는 방법을 찾을 수 없습니다. 그러나 y 값과 레이블은 그대로 있으며, 비록 내가 그들을 숨길지라도 내가 추가하는 "가이드"레이블의 위치는 라인이있는 위치가 아닌 가치의 중간에 있습니다.

내 직렬 차트 사용자 정의 y 값을 제공하거나 가장 가치가있는 행의 맨 위에 안내선을 배치 할 수있는 방법이 있습니까?

Answer 1

특정 지점에서 맞춤 라벨이 필요하거나 나만의 단계를 만들어야하는 경우 가이드가 필요합니다.

안내선을 안내선 위에 표시하려면 안내선의 inside 속성을 true로 설정하십시오. 이렇게하면 차트 영역 안의 레이블이 줄 위에 나타납니다. 레이블이 차트 영역 외부에 나타나게하려면 labelOffset을 음수 값으로 설정하십시오.

"valueAxes": [{ 
    // ... 
    "guides": [{ 
    "value": 1.5, 
    "lineAlpha": 1, 
    "label": "1.5", 
    "inside": true, 
    "labelOffset": -35 
    }] 
}] 

다음은 그와 연결된 차트의 수정 된 데모이 설명입니다 :

var chart = AmCharts.makeChart("chartdiv", { 
 
    "type": "serial", 
 
    "theme": "light", 
 
    "legend": { 
 
    "useGraphSettings": true 
 
    }, 
 
    "dataProvider": [{ 
 
    "year": 1930, 
 
    "italy": 1, 
 
    "germany": 5, 
 
    "uk": 3 
 
    }, { 
 
    "year": 1934, 
 
    "italy": 1, 
 
    "germany": 2, 
 
    "uk": 6 
 
    }, { 
 
    "year": 1938, 
 
    "italy": 2, 
 
    "germany": 3, 
 
    "uk": 1 
 
    }, { 
 
    "year": 1950, 
 
    "italy": 3, 
 
    "germany": 4, 
 
    "uk": 1 
 
    }, { 
 
    "year": 1954, 
 
    "italy": 5, 
 
    "germany": 1, 
 
    "uk": 2 
 
    }, { 
 
    "year": 1958, 
 
    "italy": 3, 
 
    "germany": 2, 
 
    "uk": 1 
 
    }, { 
 
    "year": 1962, 
 
    "italy": 1, 
 
    "germany": 2, 
 
    "uk": 3 
 
    }, { 
 
    "year": 1966, 
 
    "italy": 2, 
 
    "germany": 1, 
 
    "uk": 5 
 
    }, { 
 
    "year": 1970, 
 
    "italy": 3, 
 
    "germany": 5, 
 
    "uk": 2 
 
    }, { 
 
    "year": 1974, 
 
    "italy": 4, 
 
    "germany": 3, 
 
    "uk": 6 
 
    }, { 
 
    "year": 1978, 
 
    "italy": 1, 
 
    "germany": 2, 
 
    "uk": 4 
 
    }], 
 
    "valueAxes": [{ 
 
    "integersOnly": true, 
 
    "maximum": 6, 
 
    "minimum": 1, 
 
    "reversed": true, 
 
    "axisAlpha": 0, 
 
    "dashLength": 5, 
 
    "autoGridCount": false, 
 
    "gridCount": 10, 
 
    "position": "left", 
 
    "title": "Place taken", 
 
    "guides": [{ 
 
     "value": 1.5, 
 
     "lineAlpha": 1, 
 
     "label": "1.5", 
 
     "inside": true, 
 
     "labelOffset": -35 
 
    }] 
 
    }], 
 
    "startDuration": 0.5, 
 
    "graphs": [{ 
 
    "balloonText": "place taken by Italy in [[category]]: [[value]]", 
 
    "bullet": "round", 
 
    "hidden": true, 
 
    "title": "Italy", 
 
    "valueField": "italy", 
 
    "fillAlphas": 0 
 
    }, { 
 
    "balloonText": "place taken by Germany in [[category]]: [[value]]", 
 
    "bullet": "round", 
 
    "title": "Germany", 
 
    "valueField": "germany", 
 
    "fillAlphas": 0 
 
    }, { 
 
    "balloonText": "place taken by UK in [[category]]: [[value]]", 
 
    "bullet": "round", 
 
    "title": "United Kingdom", 
 
    "valueField": "uk", 
 
    "fillAlphas": 0 
 
    }], 
 
    "chartCursor": { 
 
    "cursorAlpha": 0, 
 
    "zoomable": false 
 
    }, 
 
    "categoryField": "year", 
 
    "categoryAxis": { 
 
    "gridPosition": "start", 
 
    "axisAlpha": 0, 
 
    "fillAlpha": 0.05, 
 
    "fillColor": "#000000", 
 
    "gridAlpha": 0, 
 
    "position": "top" 
 
    }, 
 
    "export": { 
 
    "enabled": true, 
 
    "position": "bottom-right" 
 
    } 
 
});

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