Bagaimana untuk membuat carta donat (pai) bertindan dalam Vue.js menggunakan Highcharts?
P粉980815259
P粉980815259 2024-03-19 19:17:54
0
1
414

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.

P粉980815259
P粉980815259

membalas semua(1)
P粉068486220

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!