Wie erstelle ich mit Highcharts ein gestapeltes Donut-Diagramm (Kreisdiagramm) in Vue.js?
P粉980815259
P粉980815259 2024-03-19 19:17:54
0
1
413

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.

P粉980815259
P粉980815259

Antworte allen(1)
P粉068486220

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

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!