如何使用 Highcharts 在 Vue.js 中製作堆疊甜甜圈（圓餅圖）圖表？

Question

我想使用 Highcharts 製作圓環圖，但我無法將此圖表轉換為堆疊形式。 Vue.js程式碼如下：

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

我創建的圖表如下所示：

我正在嘗試在 Elasticsearch 中提供堆疊圓環圖。這是一個例子：

嘗試在「name」和「y」之後加入發音，但沒有成功。另外，我是否需要在已安裝（或任何方法）中新增子類別？如果您對此有任何想法，我等待您的幫助。

Answer 1

要在 Highcharts 中建立此類圖表，您可以使用旭日系列類型：

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

實例： https://jsfiddle.net/BlackLabel/2Ldpvogr/

#文件： https： //www.highcharts.com/docs/chart-and-series-types/pie-chart

---

#或兩個具有指定大小和innerSize的圓餅圖系列：

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

---

實例： https://jsfiddle.net/BlackLabel/uogq3waf/

#文件： https： //www.highcharts.com/docs/chart-and-series-types/sunburst-series