javascript - Vue-Apexcharts 饼图总计未显示
问题描述
我试图在我的饼图的中心显示一些元素的总数,但到目前为止我还没有在设置中找到这个选项。我怎样才能做到这一点:
我当前的代码:
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>
解决方案
根据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)
}
}
推荐阅读
- html - 如果高度太大,如何限制将显示多少图像?
- android - 使用谷歌地图指向特定位置
- python-3.x - Pandas:取具有匹配值的行的平均值
- javascript - 如何发布 Ajax 请求
- sql - Hibernate DDL 更新 SQL 查询
- math - R 编程语言有这种语法吗?
- javascript - 如何使用代码点火器 fromework 在 PHP 中打印出模态内部的内容
- angular - 如何避免使用 Visual Studio 2017 在 Angular 4 的生产模式下加载 node_modules 和 .ts 文件
- json - Cloudformation,模板验证错误:无效的模板属性或属性
- android - 用于 fastboot 和 adb 的 Windows 10 原始 USB 访问