在超集中构建自定义马条形图并添加自定义项以自定义图表答案

【问题标题】：Buidling a custom horz bar chart in superset and adding a custom item to customize chart在超集中构建自定义马条形图并添加自定义项以自定义图表
【发布时间】：2022-01-23 04:24:36
【问题描述】：

在此之前我没有任何反应、打字或 d3 经验。

我正在尝试构建一个水平条形图，我可以在其中根据条形的值自定义条形的颜色

我已经走到这一步了。见这张图表：

我需要更改条件格式自定义，因此颜色不是从下拉列表中输入的，而是我可以输入十六进制代码的文本区域。

这是我需要改变的，也是我所说的条件格式。在表格图表上：

我已经追溯到了 controlPanel.tsx 中的以下代码

  {
      label: t('Options'),
      expanded: true,
      controlSetRows: [
        [
          {
            name: 'conditional_formatting',
            config: {
              type: 'ConditionalFormattingControl',
              renderTrigger: true,
              label: t('Conditional formatting'),
              description: t(
                'Apply conditional color formatting to numeric columns',

您输入要关联颜色的字段和颜色的实际弹出窗口似乎在 /superset/superset-frontend/src/explore/components/controls/ConditionalFormatingcontrol 文件夹。所以我希望做的是复制它，进行更改并调用它。但是我不知道我需要如何编译它，也不知道如何调用它

我的猜测是，如果我编译正确的话，我可以将下面的类型更改为我创建的组件副本的名称

        name: 'conditional_formatting',
        config: {
          type: 'ConditionalFormattingControl',

谁能帮帮我？

【问题讨论】：

标签： reactjs apache-superset

【解决方案1】：

超集中图表的可用图表自定义控件似乎位于

/superset/superset-frontend/src/expore/components/controls

导出的可用于列表的图表自定义控件列表在

/superset/superset-frontend/src/expore/components/controls/index.js

要自定义一个或创建一个新组件以自定义超集副本中的自定义图表，将其放在上面列出的目录中，您已从上面的目录复制和更改，或创建并更改 index.js 文件以便导出供使用

【讨论】：