AM chart v3기준으로.. jsp에서 AM chart를 사용할일이 있을때
막대그래프의 경우 값을 더해서 보여주는 것이 좋을때가 있고..
그래프를 통해 증/감을 보여줄때에는 더해주지 않아야한다.
예를들어 경기 점수를 회차별로 누적하는 그래프라고 한다면..
이런걸 AM chart에서 할 수 있을까?
있다.
jsp에서 차트를 설정할때.. 다음과 같이 설정해주면 된다.
var chart = {
...
"valueAxes" : [{
id: "$해당카테고리ID",
stackType: "regular",
...
unit : "$표시단위"
}],
"graphs":[
{
valueAxis: "$해당카테고리ID",
ballonText: "$임의로 지정한 ballon text",
lineThickness : $선굵기,
type: "column", //막대그래프는 column으로
valueField: "$데이터를표시할 필드".
...
},
...
};그러면 막대그래프에 누적해서 데이터를 표시해준다.
valueAxes에서 stackType을 regular로 지정하면 값을 누적한다, 값을 누적하지 않을 거라면 none으로 하면 된다.
저렇게 막대그래프를 누적하고, 각 회차별 평균값을 꺾은선 그래프로 추가하고 싶다면.. ?
꺾은선 그래프 정보를(어느 데이터를 표시할지 정해서) graphs 안에 추가하면 된다.
근데 그냥 그렇게 하면 아까 위에서 값을 누적해서 표시하고 있기에, 그래프의 값은 조금 이상하게 표시될 것이다. 이전 데이터들은 stack : regular이니까, 누적된 이전 값 + 현재 계산값 이렇게 표시될 것이다. 그래프는 값 누적처리한다고 설정했으니까.
이를 해결하기 위해서는 valueAxes를 추가해주어야 한다.
다음과 같이..
var chart = {
...
"valueAxes" : [{
id: "$해당카테고리ID",
stackType: "regular",
...
unit : "$표시단위"
},
{
id: "$꺾은선표기단위",
stackType: "none",
...
unit : "$표시단위"
}
],
"graphs":[
{
valueAxis: "$해당카테고리ID",
ballonText: "$임의로 지정한 ballon text",
lineThickness : $선굵기,
type: "column", //막대그래프는 column으로
valueField: "$데이터를표시할 필드".
...
},
{
valueAxis: "해당 카테고리ID",
...
type: "graph",
...
}
...
}
};
...
AmCharts.makeChart("$container", chart);저렇게 해주면.. 꺾은선 그래프는 별도의 그래프를 가져갈 것이다.
makeChart에서 첫번째 인자는 차트가 표시될 컨테이너 이름.
chart설정한 내용은 두번째 파라미터로 전달하자
여기서 ValueAxes 별로 각각의 legend를 가진다.
그냥 차트를 표시해버리면 각각의 legend가 표시될것.. 이걸 하나만 표시하고 싶다면, 표시하지 않을 valueAxes에는,
labelsEnabled: false를 추가해주면 된다.
근데 이 경우 하나 고민해야 할 문제가 있다. 두 valueAxes가 같은 legend range를 가진다면 문제가 안된다.
근데 둘이 다르다면? 그래프 표현에는 고민이 필요해진다.
이 경우 legend별로 하나는 좌측, 하나는 우측 이런식으로 설정할 수도 있다.
만약 legend를 하나만 쓰겠다면?
이럴때에는 두 valueAxes에 들어갈 데이터들을 뒤져서..
max값을 설정해주면 된다. chart설정에서..
...
valueAxes : [{
...
maximum : ${maxValue}
},
{
...
maximum : ${maxValue}
}
],
...위와 같이 두 valueAxes의 max/min을 일치시켜주면 legend를 하나로 쓸 수 있다. 다만 이경우 단점이 하나 있다.
그래프별로 hidden/visible처리가 가능한데, max/min을 직접 지정하지 않으면 그래프 항목이 hidden/show될때마다 legend를 알아서 갱신해주지만, max/min을 직접 지정 시, 갱신이 안된다.
AM chart관련된 자세한 내용은 아래 링크를..
댓글