如何在 Nativescript-Vue 中的甜甜圈图中放置文本？答案

【问题标题】：How to put text inside Donut Chart in Nativescript-Vue?如何在 Nativescript-Vue 中的甜甜圈图中放置文本？
【发布时间】：2021-01-27 10:09:06
【问题描述】：

有人可以帮我在 NativeScript 中的甜甜圈图表中添加文本吗？我使用带有标准插件 nativescript-ui-chart 的 Nativescript-Vue。在documentation 中有一个甜甜圈图示例，其中包含文本，例如系列中的计算值。我无法找到一种方法来构建它的任何活生生的例子。

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>

【问题讨论】：

maby via css like github.com/ProgressNS/nativescript-ui-samples-vue/blob/master/…?

标签： charts nativescript nativescript-vue

【解决方案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>

【讨论】：