如何在 Nativescript-Vue 中将文本放入圆环图中？

Question

有人可以帮我用 NativeScript 将文本放入圆环图中吗？我使用带有标准插件 nativescript-ui-chart 的 Nativescript-Vue。在 documentation 中有一个甜甜圈图的示例，里面有文本，就像系列中的计算值一样。我无法找到一种方法来制作ui与任何活生生的例子相同的东西。

Example: Text inside 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>

如何在 Nativescript-Vue 中将文本放入圆环图中？

How to put text inside Donut Chart in Nativescript-Vue?

charts

nativescript

nativescript-vue