javascript - Vue-Apexcharts pie chart total not showing - Stack Overflow

admin管理员组

文章数量:1291037

I'm trying to display the total number of some elements in the center of my pie-chart but so far I haven't been able to find this option in the settings. How can I do that:

My current code:

checksChart: {
  options: {
    colors: ['#E60B13', '#1F1E1E', '#6D6D6D', '#CECECE', 'rgba(255,87,93,.77)'],
    legend: {
      fontSize: '14px',
      fontFamily: 'Helvetica, Arial',
      fontWeight: 400,
      itemMargin: {
        vertical: 10
      },
      formatter: function(seriesName, opts) {
        return '<div class="legend-info">' + '<span>' + seriesName + '</span>' + '<span>' + opts.w.globals.series[opts.seriesIndex] + '</span>' + '</div>'
      }
    },
    dataLabels: {
      enabled: false,
    },
    labels: ['data', 'data', 'data', 'data', 'data'],

  },
  series: [400, 400, 400, 400, 400]
},

<script src=".5.17/vue.js"></script>
<vue-apex-charts type="donut" :options="checksChart.options" :series="checksChart.series"></vue-apex-charts>

I'm trying to display the total number of some elements in the center of my pie-chart but so far I haven't been able to find this option in the settings. How can I do that:

My current code:

checksChart: {
  options: {
    colors: ['#E60B13', '#1F1E1E', '#6D6D6D', '#CECECE', 'rgba(255,87,93,.77)'],
    legend: {
      fontSize: '14px',
      fontFamily: 'Helvetica, Arial',
      fontWeight: 400,
      itemMargin: {
        vertical: 10
      },
      formatter: function(seriesName, opts) {
        return '<div class="legend-info">' + '<span>' + seriesName + '</span>' + '<span>' + opts.w.globals.series[opts.seriesIndex] + '</span>' + '</div>'
      }
    },
    dataLabels: {
      enabled: false,
    },
    labels: ['data', 'data', 'data', 'data', 'data'],

  },
  series: [400, 400, 400, 400, 400]
},

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.17/vue.js"></script>
<vue-apex-charts type="donut" :options="checksChart.options" :series="checksChart.series"></vue-apex-charts>

This is what I have so far:

• javascript
• vue.js
• charts

Share Improve this question Follow asked Mar 13, 2020 at 9:04 Mike L.Mike L. 34344 silver badges1212 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

Based on the Apex Chart Documentation, you need to use plotOptions to display the total of data inside donut chart.

So you need to use like,

chartOptions: function() {
return {
    colors: ['#E60B13', '#1F1E1E', '#6D6D6D', '#CECECE', 'rgba(255,87,93,.77)'],
    legend: {
      fontSize: '14px',
      fontFamily: 'Helvetica, Arial',
      fontWeight: 400,
      itemMargin: {
        vertical: 10
      },
      formatter: function(seriesName, opts) {
        return '<div class="legend-info">' + '<span>' + seriesName + '</span>' + '<span>' + opts.w.globals.series[opts.seriesIndex] + '</span>' + '</div>'
      }
    },
    dataLabels: {
      enabled: false,
    },
    labels: ['data', 'data', 'data', 'data', 'data'],

     plotOptions: {
          pie: {
            donut: {
              labels: {
                show: true,
                name: {
                  show: true,
                  fontSize: '22px',
                  fontFamily: 'Rubik',
                  color: '#dfsda',
                  offsetY: -10
                },
                value: {
                  show: true,
                  fontSize: '16px',
                  fontFamily: 'Helvetica, Arial, sans-serif',
                  color: undefined,
                  offsetY: 16,
                  formatter: function (val) {
                    return val
                  }
                },
                total: {
                  show: true,
                  label: 'Total',
                  color: '#373d3f',
                  formatter: function (w) {
                    return w.globals.seriesTotals.reduce((a, b) => {
                      return a + b
                    }, 0)
                  }
                }
              }
            }
          }
        },
          series: [400, 400, 400, 400, 400]
      }
    },

In the above code, the sum of series is achieved by using, seriesTotals.reduce like,

   total: {
     show: true,
     label: 'Total',
     color: '#373d3f',
     formatter: function (w) {
       return w.globals.seriesTotals.reduce((a, b) => {
           return a + b
       }, 0)
      }
    }

Working Vue Apex donut codepen

本文标签： javascriptVueApexcharts pie chart total not showingStack Overflow