Cara memanggil kaedah daripada pilihan dalam ApexChart menggunakan vue.js

Question

Saya baru menggunakan carta vue dan apex, pada asasnya apa yang saya perlukan ialah memanggil kaedah daripada pilihan carta apex, saya mencipta fail yang menunjukkan masalah yang saya hadapi:

https://jsfiddle.net/wr3uo5va/

Saya perlukan dari chartOptions.dataLabels 调用方法 currencyValue

    dataLabels: {
      enabled: true,
      offsetX: -25,
      formatter: function(val) {
        return val + " Reais";  <--- This works
       // return this.currencyValue(val)  <--- This does not work
      },
    },

Ada cadangan?

Answer 1

Anda boleh meletakkan chartOptions dalam kaedah dan bukannya data. Di bawah ialah kod kerja

const currencyValue = (val) => {
  return "R$" + val;
}

new Vue({
  el: "#app",
  data() {
    return {
      series: [450, 300, 500]
    }
  },
  methods: {
    chartOptions() {
      return {
        labels: ['Paid', 'Pending', 'Rejected'],
        plotOptions: {
            radialBar: {
                size: 165,
                offsetY: 30,
                hollow: {
                    size: '20%'
                },
                track: {
                    background: "#ebebeb",
                    strokeWidth: '100%',
                    margin: 15,
                },
                dataLabels: {
                    show: true,
                    name: {
                        fontSize: '18px',
                    },
                    value: {
                        fontSize: '16px',
                        color: "#636a71",
                        offsetY: 11
                    },
                    total: {
                        show: true,
                        label: 'Total',
                        formatter: function() {
                            return 42459
                        }
                    }
                }
            },
        },
        responsive: [{
            breakpoint: 576,
            options: {
                plotOptions: {
                    radialBar: {
                        size: 150,
                        hollow: {
                            size: '20%'
                        },
                        track: {
                            background: "#ebebeb",
                            strokeWidth: '100%',
                            margin: 15,
                        },
                    }
                }
            }
        }],
        colors: ['#7961F9', '#FF9F43', '#EA5455'],
        fill: {
            type: 'gradient',
            gradient: {
                // enabled: true,
                shade: 'dark',
                type: 'vertical',
                shadeIntensity: 0.5,
                gradientToColors: ['#9c8cfc', '#FFC085', '#f29292'],
                inverseColors: false,
                opacityFrom: 1,
                opacityTo: 1,
                stops: [0, 100]
            },
        },
        stroke: {
            lineCap: 'round'
        },
        chart: {
            dropShadow: {
                enabled: true,
                blur: 3,
                left: 1,
                top: 1,
                opacity: 0.1
            },
        },
        tooltip: {
          x: {
            formatter: function (val) {
              return val;
            },
          },
          y: {
            formatter: function (val) {
              return currencyValue(val);
            },
          },
        },            
      }
    }
  },
  components: {
    VueApexCharts
  }
})

Kaedah tidak boleh dipanggil data 或 compulated 中调用，可以在 methods

Satu perkara yang perlu diubahsuai dalam html adalah seperti berikut

Answer 2

Masalahnya ialah formatter 回调中的 this ialah contoh carta (bukan contoh komponen) kerana ia diisytiharkan sebagai fungsi biasa.

Penyelesaian adalah menggunakan fungsi anak panah untuk mengikat contoh komponen sebagai konteks:

export default {
  methods: {
    currencyValue(value) {⋯},

    loadChartData() {
      ⋮
      this.chartOptions = {
        ⋮
        dataLabels: {
          ⋮
          // ❌ don't use regular function here
          //formatter: function(val) {
          //  return this.currencyValue(val)
          //},

          // ✅
          formatter: (val) => {
            return this.currencyValue(val)
          },
        },
      }
    }
  }
}

Rebab yang dikemas kini