ZingChart CSV에서 제공되는 파이 차트 레이블의 스타일링 또는 제거

외부 CSV 파일로 먹는 ZingChart 파이 차트가 있습니다. 레이블을 원형 차트에 숨기려면 어떻게해야합니까? 아래의 시뮬레이션 된 코드에서는 이 전체적으로 텍스트가 맨 아래에 표시됩니다. ZingChart CSV에서 제공되는 파이 차트 레이블의 스타일링 또는 제거

var chartData = { 
 
    type: "pie", 
 
    csv: { 
 
    title: true, 
 
    dataString: "Chart title__Number of books|read entirely_None|30_Many|31_Few|25_All|14", 
 
    rowSeparator: "_", 
 
    separator: "|", 
 
    mirrored: true, 
 
    horizontalLabels: true, 
 
    verticalLabels: true, 
 
    } 
 
} 
 

 
zingchart.render({ 
 
    id: "chartDiv", 
 
    data: chartData, 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zingchart/2.6.0/zingchart.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id='chartDiv'></div> 
 
</body> 
 

 
</html>

docs

은 분명히 해당 항목을 해결하는 방법을하지 않는 (또는 그들이 할 ... 그리고 그것은 작동하지 않습니다).

출처

2017-05-16 Leeroy

우리는 도서관에서 이러한 항목을 "valueBox"이라고합니다. 차트의 모든 텍스트는 레이블에서 상속받습니다.이 경우 valueBox도 마찬가지로 상속됩니다. 즉, 레이블의 꽤 표준 세트를 텍스트의 모든 부분에 적용 할 수 있습니다.

"plot": { 
     "valueBox": { 
     "visible": false 
     } 
    }

불리하게, 당신은 valueBox 배열을 통해 여러 라벨을을 추가 할 수 있습니다. 단일 객체 또는 객체 배열 일 수 있습니다. 이렇게하면 여러 라벨을 표시 할 수 있습니다.

참고 : CSV 전설 v2.6.0에 분류됩니다_는

 "_valueBox": [ 
     { 
      type: 'all', 
      placement: 'out', 
      text: '%t' 
     }, 
     { 
      type: 'all', 
      placement: 'in', 
      text: '%v (%npv)' 
     }  
     ]

참고 JSON 구조의 주석입니다. 다음 링크에 패치를 설치했습니다. enter code here

<script src= "https://cdn.zingchart.com/hotfix/zingchart.min.js"></script>

참조 된 모든 문서는 여기에서 찾을 수 있습니다 :

https://www.zingchart.com/docs/tutorials/chart-elements/value-boxes/

https://www.zingchart.com/docs/api/json-configuration/graphset/plot/

https://www.zingchart.com/docs/api/json-configuration/graphset/plot/value-box/

https://www.zingchart.com/docs/tutorials/chart-elements/zingchart-tokens/

var myConfig = { "graphset":[ { "type":"pie", "csv":{ "title":true, "separator":"|", "mirrored":true, "data-string":"Chart title__Number of books|read entirely_None|30_Many|31_Few|25_All|14", "row-separator":"_", "horizontal-labels":true, "vertical-labels":true }, "scale":{ "visible":false }, "plot": { "valueBox": { "visible": false }, "_valueBox": [ { type: 'all', placement: 'out', text: '%t' }, { type: 'all', placement: 'in', text: '%v (%npv)' } ] } } ], "tween":null }; zingchart.render({ \t id: 'myChart', \t data: myConfig, \t height: '100%', \t width: '100%' });

html, body { \t height:100%; \t width:100%; \t margin:0; \t padding:0; } #myChart { \t height:100%; \t width:100%; \t min-height:150px; } .zc-ref { \t display:none; }

<!DOCTYPE html> <html> \t <head> \t \t <script src= "https://cdn.zingchart.com/hotfix/zingchart.min.js"></script> \t </head> \t <body> \t \t <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div> \t </body> </html>

출처

2017-05-16 20:28:56 nardecky

나는'개별 데이터 포인트의 값입니다 valueBox'es을 원하지만 나는 "전체 읽기"라는 전체 파이를 설명 스케일 라벨을 원하지 않는다. 데모는이 작업을 수행하지 않으며, 코드가 말하는대로 수행하지 않는 것으로 보입니다 (값이 전혀없고 원형 차트 레이블이 여전히 있음). – Leeroy

잘못된 텍스트 조각에는 'myChart-graph-id0-scale-item_0'이라는 ID가 있습니다. 그래서 그 항목을 호출하고 있습니다. – Leeroy

지금 당신이 말하는 것을 봅니다. bitium 플러그인 내가 stackoverflow에 차트보기를 엉망으로 그래서 그 텍스트를 볼 수 없습니다. 열과 행 구분 기호와 관련이 있습니다. 솔직히 javascript에서 csv 파일을 파싱하고 데이터 문자열을 전달합니까? 형식을 자바 스크립트 객체 표기법 형식에 훨씬 쉽게 넣는 것이 더 쉬울 수도 있습니다. 이게 가능한가? 아니면 그냥 당신의 CSV의 문자열 형식을 요청하고 ZingChart에 연결하는 http입니까? – nardecky

ZingChart CSV에서 제공되는 파이 차트 레이블의 스타일링 또는 제거

답변

관련 문제