Superset二次开发之柱状图实现同时显示百分比、原始值、汇总值的功能

 背景

柱状图贡献模式选择行，堆积样式选择Stack，默认展示百分比，可以展示每个堆积的百分比，但是无法实现同时展示百分比、原始值、汇总值的效果。借助Tooltip可以实现，但是不直观。

柱状图来自Echarts插件，可以先考虑Echarts的柱状图如何实现此需求，再研究Superset项目的柱状图该如何实现

 推荐阅读

Echarts 柱状图实现同时显示百分比+原始值+汇总值_echarts 设置柱状图上显示数据-CSDN博客

 配置控件 

superset-frontend\plugins\plugin-chart-echarts\src\controls.tsx

//同时显示百分比、原始值、汇总值功能
const displayDetailsDataAndTotalControl: ControlSetItem = {name: 'displayDetailsDataAndTotal',config: {type: 'CheckboxControl',label: t('Display Details Data And Total'),renderTrigger: true,default: false,description: t('With onlyTotal turned off, the bar chart of the echarts plugin displays detailed data and total',),visibility: ({ controls }: ControlPanelsContainerProps) =>Boolean(!controls?.only_total?.value),},
};export const showValueSection: ControlSetRow[] = [[showValueControl],[stackControl],[onlyTotalControl],[displayDetailsDataAndTotalControl], //显示原始值、汇总值功能[percentageThresholdControl],
];

配置国际化

• superset/translations/en/LC_MESSAGES/messages.json

"Display details data and total": [""],