如何在native - script- vue的甜甜圈图内放置文本?

Question

有人能帮我把一个文本内的甜甜圈图在原生脚本?我使用native - script- vue与标准插件native - script-ui-chart． 在文档中有一个带有文本的Donut Chart示例，就像从系列中计算出的值一样。我找不到一种方法来构建相同的任何一个实际的例子。

示例:Donut Chart

这是我的Donut Chart代码:

<RadPieChart allowAnimation="true" row="1" column="0" height="200">
<DonutSeries v-tkPieSeries
seriesName="chartExample"
selectionMode="DataPoint"
expandRadius="0.4"
outerRadiusFactor="1"
innerRadiusFactor="0.6"
valueProperty="value"
legendLabel="name"
showLabels="false"
:items="chartItems" />
</RadPieChart>
<script>
export default {
props: {
chartData: {
type: Object,
required: false,
default: undefined
},
},
computed: {
chartItems() {
return [ { name: 'front', value: this.chartData.front }, { name: 'front left', value: 100 - this.chartData.front } ]
}
}
</script>

Answer 1

您可以使用GridLayout来堆叠z索引上的内容，并将您的文本放在饼状图的前面或后面。

GridLayout按其定义的顺序堆叠其内容-布局底部的内容将堆叠得更高。例如，在下面的代码中，由于Label是在RadPieChart之后定义的，因此它将位于图表上方。

<GridLayout rows="auto" columns="auto">
<RadPieChart allowAnimation="true" row="1" column="0" height="200">
<DonutSeries v-tkPieSeries
seriesName="chartExample"
selectionMode="DataPoint"
expandRadius="0.4"
outerRadiusFactor="1"
innerRadiusFactor="0.6"
valueProperty="value"
legendLabel="name"
showLabels="false"
:items="chartItems" />
</RadPieChart>
<!-- whatever text you want to put inside the chart -->
<Label text="Your text here"></Label>
</GridLayout>