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": [""],