Wie erstelle ich mit Highcharts ein gestapeltes Donut-Diagramm (Kreisdiagramm) in Vue.js?

Question

Ich möchte mit Highcharts ein Donut-Diagramm erstellen, kann dieses Diagramm jedoch nicht in eine gestapelte Form konvertieren. Der Vue.js-Code lautet wie folgt:

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

Das von mir erstellte Diagramm sieht so aus:

Ich versuche, in Elasticsearch ein gestapeltes Donut-Diagramm bereitzustellen. Hier ist ein Beispiel:

Ich habe versucht, nach „Name“ und „y“ eine Aussprache hinzuzufügen, aber ohne Erfolg. Muss ich außerdem eine Unterkategorie zu „Installiert“ (oder einer anderen Methode) hinzufügen? Wenn Sie dazu Ideen haben, warte ich auf Ihre Hilfe.

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