zing-chart ring 텍스트가 가운데 정렬

텍스트를 가운데 정렬 할 수 없습니다. zing-chart ring 텍스트가 가운데 정렬

HTML 코드

<zingchart id="ring" zc-json="data" ></zingchart>

zingchart의 JSON 데이터

$scope.data = { 
    globals: { 
     shadow: false, 
     fontFamily: "Verdana", 
     fontWeight: "100" 
    }, 
    type: "ring", 
    backgroundColor: "#fff", 

    legend: { 
     layout: "x5", 
     position: "50%", 
     borderColor: "transparent", 
     marker: { 
      borderRadius: 10, 
      borderColor: "transparent" 
     } 
    }, 
    tooltip: { 
     text: "%v $" 
    }, 
    plot: { 
     refAngle: "-90", 
     borderWidth: "0px", 
     valueBox: { 
      placement: "in", 
      text: "%npv %", 
      "font-color":"black", 
      fontSize: "15px", 
      textAlpha: 1, 
     } 
    }, 
    series: [{ 
     text: "Total Billed", 
     values: $scope.billedHours, 
     backgroundColor: "#97c563", 
    }, { 
     text: "Total Budget", 
     values: $scope.projectRevenue, 
     backgroundColor: "#f7d347", 
    }] 
};

내가 난생 처음이 Libary를 사용하고는, 다른 옵션 아무것도하지만 시도 일어났다. 전문가의 도움이 필요하므로 제발 뭔가를 제안하십시오. 사전에 감사합니다.

출처

2017-02-07 piyush singh

후 jsfiddle 링크 –

수 없습니다 사용할 수 있습니다. –

미래에는 값으로 전체 차트 JSON을 게시해야합니다. 차트 렌더링과 관련된 문제가있는 경우 데이터가 가장 중요한 것 중 하나입니다. https://help.zingchart.com/hc/en-us/articles/115000680146-How-To-Get-My-Chart-JSON- – nardecky

내가 내 프로젝트에서이 시도하고 이것이 당신의 전설 속성을 대체, 트릭을 수행해야합니다 우리는 다음 링크에서 광범위한 문서를 가지고 이걸로. 내가하면

바로 당신은 또한 AngularJS와 함께 jsfiddle에 대한 그래프를 생성 할 layout: "center"

  legend: { 
       layout: "2x2", //this should center it on mid 
       position: "50%", 
       borderColor: "transparent", 
       marker: { 
        borderRadius: 10, 
        borderColor: "transparent" 
       } 
      },

출처

2017-02-07 18:21:14 Martin

레이아웃 : "2x2"근무, 고마워. –

범례 중심을 맞추려면 align:center 속성을 사용할 수 있습니다.

Legend Tutorial

Legend JSON Docs

var myConfig = { 
 
    \t type: 'pie', 
 
    \t plot: { 
 
    \t layout: 'auto' 
 
    \t }, 
 
    legend: { 
 
     layout: "x5", 
 
     align: 'center', 
 
     borderColor: "transparent", 
 
     marker: { 
 
      borderRadius: 10, 
 
      borderColor: "transparent" 
 
     } 
 
    }, 
 
\t series: [ 
 
\t \t { 
 
\t \t \t values: [35] 
 
\t \t }, 
 
\t \t { 
 
\t \t \t values: [25] 
 
\t \t }, 
 
\t \t { 
 
\t \t \t values: [15] 
 
\t \t }, 
 
\t \t { 
 
\t \t \t values: [45] 
 
\t \t }, 
 
\t \t { 
 
\t \t \t values: [75] 
 
\t \t } 
 
\t ] 
 
}; 
 

 
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/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-02-07 18:19:09 nardecky

zing-chart ring 텍스트가 가운데 정렬

답변

관련 문제