zing-chart 环形文本居中对齐

Question

我无法将文本居中对齐。

HTML code

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

zingchart json data

$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",
    }]
};

我是第一次使用这个库，尝试了不同的选项但没有任何反应。需要专家的帮助，请提出一些建议。提前致谢。

Answer 1

要对齐图例中心，您可以使用属性 align:center。我们在以下链接中提供了大量文档：

Legend Tutorial

Legend JSON Docs

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

zingchart.render({ 
 id: 'myChart', 
 data: myConfig, 
 height: '100%', 
 width: '100%' 
});

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

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

Answer 2

我在我的项目中尝试过这个，这应该可以解决问题，只需用这个替换您的图例属性。

如果我是对的你也可以使用layout: "center"

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

zing-chart 环形文本居中对齐

zing-chart ring text align to center

angularjs

zingchart