javascript & jQuery

AmChartJS API

k9e4h 2016. 8. 9. 11:00

이 게시물은 AmChartJSAPI 문서를 필요에 의한 것만 옮긴 것입니다. 전체 API 문서를 꼭 확인하세요!


[API Document] https://docs.amcharts.com/javascriptcharts


[Chart Test] https://live.amcharts.com/new/edit/


[Chart Demo] https://www.amcharts.com/demos/


[추가 Document] http://definitelytyped.org/docs/amcharts--AmCharts/classes/amcharts.amserialchart.html




AmSerialChart



AmSerialChart is the class you have to use for majority of chart types. 

The supported chart types are: line, area, column, bar, step line, smoothed line, candlestick and OHLC. 

The chart can be rotated by 90 degrees so the column chart becomes bar chart. 

The chart supports simple and logarithmic scales, it can have multiple value axes. 

The chart can place data points at equal intervals or can parse dates and place data points at irregular intervals.



properties


  • categoryAxis
            읽기 전용, 카테고리축을 만듬. properties를 바꾸고 싶을때, you should get this axis from the chart and set properties to this object.
  • graphs (Array)
            the array of graphs belonging to this chart. 
  • the array of graphs belonging to this chart. addGraph/removeGraph 메소드를 이용하여 그래프 추가/삭제


javascript/ object.prototype.hasOwnProperty(testObject) - testObject가 특정 프로퍼티를 가지고 있는지를 나타내는 불리언 값 반환.

hasOwnProperty [https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty]



method


  • addValueAxis(axis)    
            axis가 parameter로 들어가서 차트에 축을 더함. 하나를 자동으로만들고 추가로 만들고싶을때 사용 
  • addLegend(legend,legendDivId)
            Amlegend과 id또는 legend div가 parameter로 들어감. 


addLegend 메소드 설명

Adds a legend to the chart. By default, you don't need to create div for your legend, however if you want it to be positioned in some different way, you can create div anywhere you want and pass id or reference to your div as a second parameter. (NOTE: This method will not work on StockPanel.)


  • write(container)
        id,div가 parameter로 들어감. div에 chart를 그린다.




ValueAxis (inheritance : AxisBase)



ValueAxis is the class which displays value axis for the chart. The chart can have any number of value axes. For Serial chart one value axis is created automatically. For XY Chart two value axes (horizontal and vertical) are created automatically.



properties


  • axisAlpha
            축 불투명도
  • gridAlpha
            grid line 불투명도
  • stackType
            Stacking mode of the axis. Possible values are: "none", "regular", "100%", "3d". Note, only graphs of one type will be stacked.
            stack line chart를 그릴때 chart1의 값은 200이상, chart2의 값은 1이하의 값이였다. stackType="regular"로 하니 chart1,2가 겹쳐서 보이는 문제 발생함
  • categoryAxis
            읽기 전용, 카테고리축을 만듬. properties를 바꾸고 싶을때, you should get this axis from the chart and set properties to this object.
  • dataProvider(Array)
            chart의 데이터를 가지고 있는 배열
  • addLabel(x,y,text,align,size,color,rotation,alpha,bold,url)
  • chartDiv 




CategoryAxis (inheritance : AxisBase)



CategoriAxis is the class which displays category axis for the Serial Chart. The chart can have only one category axis. If you do not add category axis to the Serial chart, it will be created automatically.



properties






AmGraph



AmGraph class displays all types of graphs - line, column, step line, smoothed line, ohlc and candlestick


properties


  • valueField
            name of the value field in your dataprovider
  • lineThickness
            라인 두께




AmLegend



AmLegend is the class that displays legend of the chart. Legend to the chart should be added using chart.addLegend(legend) method.











모든 Legend를 선택해제 했을 때 valuefiled 보이기 - 모든 값이 0 인 legend를 표시안해주고 value만 보여주는 형식

https://www.amcharts.com/kbase/automatically-hiding-graphs-with-all-zero-values-from-legend/



visibleInLegend = true 

legend를 check했다가 풀었다가 가능하게 함


축 시작점 강제 지정

http://yamea-guide.tistory.com/4


차트 클릭 이벤트

http://abdelraoof.com/blog/2015/07/26/handling-event-propogation-on-amcharts/

반응형

'javascript & jQuery' 카테고리의 다른 글

javascript array의 function들  (0) 2016.08.11
Object.keys()  (0) 2016.08.10
HTML 메일 보내기  (0) 2016.08.08
HTML lang=ko  (0) 2016.08.08
[HTML] a 태그 관련  (0) 2016.08.05