#进阶用法

本页聚焦于 CSR/DOM 场景（需要交互/动画/tooltip 的场景）。SSR 输出静态 SVG，部分能力天然不可用。

#配色与暗色模式

#每个图表单独设置

TSX
import { Bar } from 'mba/csr'

export default () => {
  return <Bar
    isDark
    colors={{ light: ['#2563eb', '#16a34a'], dark: ['#60a5fa', '#34d399'] }}
    labelField="name"
    valueField="value"
    valueLabel="Value"
    data={[{ name: 'A', value: 1 }]}
  />
}

#为某个图表类型设置默认配色

TypeScript
import { setGraphColor } from 'mba/utils/Setting'

// 规则：优先匹配 `${graphName}-${graphType}`，否则回退 `${graphName}`
// 例如 Bar(type="radius") 的名字会包含 `bar-radius`
setGraphColor('bar-radius', ['#ff4d4f', '#1677ff', '#52c41a'])

#全局默认（GLOBAL）

TypeScript
import { globalSetting } from 'mba/utils/Setting'

globalSetting({
  DARK_MODE: true,
  ANIMATION_DURATION: 300,
  ANIMATION_EASE: 'cubicOut',
  TOOLTIP_HIDE_DELAY: 200,
})

不建议随意修改 PREFIX。默认 CSS 选择器以 .v- 为前缀；修改前缀后你需要提供自己的 CSS 覆盖。

#纹理与渐变（fillStyle）

MBA 内置 FillStyle（可用于多种图表的填充效果）：

  • linear：纵向渐变
  • hlinear：横向渐变
  • slash：斜线
  • grid：网格
  • grain：细点
TSX
import { Bar } from 'mba/csr'

export default () => {
  return <Bar
    fillStyle="slash"
    labelField="name"
    valueField="value"
    valueLabel="Value"
    data={[{ name: 'A', value: 12 }]}
  />
}

#自定义 tooltip（tip）

#WithSingle（返回 ReactNode）

TSX
import { Bar } from 'mba/csr'

export default () => {
  return <Bar
    labelField="name"
    valueField="value"
    valueLabel="Value"
    data={[{ name: 'A', value: 12 }]}
    tip={(row, meta) => {
      return <div>
        <h4>{meta.label}</h4>
        <ul>
          <li><label>Value</label><b>{row.value}</b></li>
        </ul>
      </div>
    }}
  />
}

DOM 模式的 tip 只能返回字符串；SSR 模式不支持 tooltip。

#自定义样式（setStyle + PLACE）

PLACE 是内置样式位点枚举；你可以用 setStyle 覆盖对应 SVG 元素的属性。

TypeScript
import { PLACE, setStyle } from 'mba/utils/Setting'

// 例如：让坐标轴标题更大、更粗
setStyle(PLACE.AXIS_TITLE, { fontSize: 16, fontWeight: 'bold' })

#扩展：注册自定义图形形状（CSR/DOM）

以 Bar 为例，Bar 的 type 支持自定义字符串。你可以注册一个新的绘制器，然后在 type 中使用它。

TypeScript
import { registerBar } from 'mba/dom/register'

registerBar('diamond', (graph, props, layout, items, enter) => {
  // 高级：这里是 D3 的 enter/update 绘制逻辑
  // 如果你不熟悉 D3 selection，建议先基于现有 Drawer 改造
})

然后：

TSX
'use client'
import { Bar } from 'mba/csr'

export default () => {
  return <Bar
    type="diamond"
    labelField="name"
    valueField="value"
    valueLabel="Value"
    data={[{ name: 'A', value: 12 }]}
  />
}

可注册的 drawer 入口见：扩展与注册。

#下一步