javascript - Vue-Apexcharts 饼图总数不显示

标签 javascript vue.js charts

我试图在我的饼图中心显示一些元素的总数,但到目前为止我还没有在设置中找到这个选项。我该怎么做:

我当前的代码:

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.com/ajax/libs/vue/2.5.17/vue.js"></script>
<vue-apex-charts type="donut" :options="checksChart.options" :series="checksChart.series"></vue-apex-charts>

这是我目前所拥有的: enter image description here

最佳答案

基于Apex Chart Documentation , 你需要使用 plotOptions 来显示圆环图中的数据总数。

所以你需要使用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]
      }
    },

在上面的代码中,系列的总和是通过使用 seriesTotals.reduce 来实现的,

   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

关于javascript - Vue-Apexcharts 饼图总数不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60667546/

相关文章:

javascript - 使用 Lambda 函数在 Amazon S3 中发出 Ajax 请求

javascript - 如何在 Vue 中为 html 代码创建组件?

c# - SSL 的谷歌图表

c++ - 在 C++ 中绘制图表的最佳方法是什么

c# - 执行 ChartImg.axd 的子请求时出错。这不是重复的

javascript - 使用 AJAX 在 PHP 页面上动态显示 SQL 查询

javascript - PHP 在 HTML 中显示实时 Shell 输出

javascript - 向 JQuery 节点集添加内容

javascript - 在 vuejs 中测试 firebase 函数

vue.js - 为动态生成的 nuxt 页面选择布局