Bagaimana untuk membuat carta donat (pai) bertindan dalam Vue.js menggunakan Highcharts?

Question

Saya ingin membuat carta donat menggunakan Highcharts, tetapi saya tidak boleh menukar carta ini kepada bentuk bertindan. Kod Vue.js adalah seperti berikut:

<template>
  <div>
    <b-col md="12" style="margin-top: 40px">
      <highcharts :options="pieChartOptions"></highcharts>

    </b-col>

  </div>

</template>

<script>
import axios from 'axios'
import {mapActions} from "vuex";
import Highcharts from "highcharts";
import {Chart} from 'highcharts-vue'
import DashboardTable from "../../components/DashboardTable/DashboardTable";
import Widget from '@/components/Widget/Widget';

export default {
  name:"TestChart",
  components: {
    DashboardTable, Widget,
    highcharts: Chart
  },
  data(){
    return{
      pieChartOptions:{
        colors: ['#01BAF2', '#71BF45', '#FAA74B', '#B37CD2'],
        chart: {
          type: 'pie'
        },
        accessibility: {
          point: {
            valueSuffix: '%'
          }
        },
        title: {
          text: 'Coffee'
        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage:.0f}%</b>'
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: true,
              format: '{point.name}: {y} %'
            },
            showInLegend: true
          }
        },
        series: [{
          name: 'Types',
          colorByPoint: true,
          innerSize: '75%',
          data: [{
            name: 'Filtre',
            y: 68.1,
          }, {
            name: 'Türk',
            y: 11.0
          }, {
            name: 'Latte',
            y: 11.2
          }, {
            name: 'Espresso',
            y: 9.7
          }]
        }]
      }
    }
  },
}

</script>

<style>

</style>

Carta yang saya buat kelihatan seperti ini:

Saya cuba menyediakan carta donat bertindan dalam Elasticsearch. Berikut adalah contoh:

Cuba menambah sebutan selepas "nama" dan "y" tetapi tidak berjaya. Juga, adakah saya perlu menambah subkategori untuk dipasang (atau mana-mana kaedah)? Jika anda mempunyai sebarang idea tentang perkara ini, saya sedang menunggu bantuan anda.

Answer 1

Untuk mencipta carta jenis ini dalam Highcharts, anda boleh menggunakan jenis siri sunburst:

series: [{
        type: 'sunburst',
        ...
    }]

Contoh: https://jsfiddle.net/BlackLabel/2Ldpvogr/

Dokumentasi: https://www.highcharts.com/docs/chart-and-series-types/pie-chart

---

atau dua siri carta pai dengan 大小和innerSize yang ditentukan:

chart: {
        type: 'pie'
    },
    series: [{
        size: '60%',
        ...
    }, {
        size: '80%',
        innerSize: '60%',
        ...
    }]

---

Contoh: https://jsfiddle.net/BlackLabel/uogq3waf/

Dokumentasi: https://www.highcharts.com/docs/chart-and-series-types/sunburst-series