ZingChart에서 x 축과 y 축에 제목을 추가하는 방법

ZingChart를 사용하여 x 축과 y 축에 제목을 추가하고 싶습니다. 예를 들어 내 x 축에 연도 (2010, 2011, 2012 등)가 표시되는 경우 각 연도 레이블 아래에 '회계 연도'라는 제목을 표시하고 싶습니다.ZingChart에서 x 축과 y 축에 제목을 추가하는 방법

마찬가지로 수익을 측정 할 경우 y 축으로 1,000,000, 2,000,000 등과 같은 레이블을 볼 수 있습니다. y 축에 "Annual Revenues"라는 제목을 추가하려고합니다.

관련 문서에서 아무 것도 찾을 수 없습니다.

출처

2014-12-31 Mark Salamon

http://www.zingchart.com/docs/features/scales/#scales__features__labels –

Martin이 사용한 링크는 정확하지만 JSON 구문 가이드에도 이에 대한 문서가 있습니다. http://www.zingchart.com/docs/json-attributes-syntax/scale-objects/label/

var myChart = { 
 
"graphset":[ 
 
    { 
 
     "type":"mixed", 
 
     "background-color":"#ffffff", 
 
     "alpha":1, 
 
     "title":{ 
 
      "text":"Browser Usage", 
 
      "font-size":"20px", 
 
      "font-weight":"bold", 
 
      "font-color":"#000000", 
 
      "background-color":"#ffffff", 
 
      "margin-top":"15px", 
 
      "margin-left":"15px", 
 
      "margin-bottom":"10px", 
 
      "text-align":"left" 
 
     }, 
 
     "scale-x":{ 
 
      "line-width":"1px", 
 
      "line-color":"#CCCCCC", 
 
      "line-style":"solid", 
 
      "values":["Jan","Feb","Mar","Apr","May","Jun","Jul"], 
 
      "guide":{ 
 
       "line-width":"1px", 
 
       "line-color":"#CCCCCC", 
 
       "line-style":"solid" 
 
      }, 
 
     "label":{ 
 
     "text":"Month", 
 
     "font-size":"20px", 
 
     "color":"red" 
 
     }, 
 
      "item":{ 
 
       "font-family":"helvetica", 
 
       "font-color":"#CCCCCC", 
 
       "font-weight":"bold", 
 
       "font-size":"10px", 
 
       "visible":true 
 
      } 
 
     }, 
 
     "scale-y":{ 
 
      "values":"0:50:10", 
 
      "line-width":"1px", 
 
      "line-color":"#CCCCCC", 
 
      "line-style":"solid", 
 
      "tick":{ 
 
       "visible":true, 
 
       "line-color":"#CCCCCC", 
 
       "placement":"outer", 
 
       "size":"12px" 
 
      }, 
 
      "item":{ 
 
       "font-color":"#CCCCCC", 
 
       "font-weight":"bold", 
 
       "font-size":"10px", 
 
       "visible":true 
 
      }, 
 
      "guide":{ 
 
       "line-width":"1px", 
 
       "line-color":"#CCCCCC", 
 
       "line-style":"solid" 
 
      } 
 
     }, 
 
     "tooltip":{ 
 
      "visible":true 
 
     }, 
 
     "plot":{ 
 
      "alpha":1, 
 
      "hover-state":{ 
 
       "visible":false 
 
      } 
 
     }, 
 
     "series":[ 
 
      { 
 
       "type":"bar", 
 
       "values":[47,32,37,48,28,27,32], 
 
       "text":"Safari", 
 
       "background-color":"#7eac10" 
 
      } 
 
     ] 
 
    } 
 
] 
 
}; 
 

 
zingchart.render({ 
 
    id: "myChart", 
 
    height: "300px", 
 
    width: "100%", 
 
    data: myChart 
 
});

<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script> 
 
<div id="myChart"></div>

당신은 제목에 대한 문서를 검색했을 수 있습니다. 그러나 scale-x 및 scale-y 객체에 "label"객체를 추가하고 차트와 일치시키기 위해 스타일을 지정하는 데 필요한 속성을 채워서 원하는 작업을 수행 할 수 있습니다.

언제든지 ZingChart의 차트를 마우스 오른쪽 버튼으로 클릭하여 소스를 볼 수 있습니다.

출처

2014-12-31 17:30:06 Merrily

ZingChart에서 x 축과 y 축에 제목을 추가하는 방법

답변

관련 문제