Question

我无法将文字与中心对齐。

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，尝试了不同的选择但没有任何事情发生。需要专家的帮助，请提出建议。提前谢谢。

Answer 1

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

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

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

Answer 2

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

Legend Tutorial

Legend JSON Docs

＆＃13;

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%' 
});

＆＃13;

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

＆＃13;

<!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>

＆＃13;

zing-chart环文本与

2 个答案: