跳到内容
+

图表 - 样式

本页汇总了关于图表自定义的主题。

颜色

系列颜色

系列接受一个 color 属性，它是用于渲染其组件的基础颜色。

<LineChart series={[{ ..., color: '#fdb462'}]} />

调色板

图表内置了调色板，可以自动为系列分配颜色。如果特定系列缺少 color 属性，图表将默认根据系列的索引分配颜色。

您可以通过在图表组件上使用 colors 属性（如果您使用组合，则在 <ChartContainer /> 上）来设置自定义调色板。此属性接受颜色数组，或以主题模式（'dark' 或 'light'）为输入并返回颜色数组的回调函数。

提供的调色板

该库包含三个调色板。

自定义调色板

这些调色板也可以使用 d3-scale-chromatic 生成。或者任何您喜欢的颜色处理库。

这是一个 d3 分类调色板的示例。

值颜色

颜色也可以根据项目值使用相应坐标轴的 colorMap 属性来设置。

在其各自的文档章节中了解更多关于如何在每个图表组件中使用此功能的信息

colorMap 属性可以接受以下定义的三种类型的对象。

分段颜色映射

分段配置采用 n 个 thresholds 值和 n+1 个 colors 的数组。

{
  type: 'piecewise';
  thresholds: Value[];
  colors: string[];
}

连续颜色映射

连续配置允许您将从 min 到 max 属性的值映射到其相应的颜色。

color 属性可以是用于插值的两个颜色数组，也可以是返回与介于 0 和 1 之间的数字 t 相对应的颜色的插值函数。d3-scale-chromatic 提供了许多这样的函数。

低于 min 的值获取 min 值的颜色；同样，高于 max 的值获取 max 值的颜色。默认情况下，min/max 范围设置为 0 / 100。

{
  type: 'continuous';
  min?: Value;
  max?: Value;
  color: [string, string] | ((t: number) => string);
}

序数颜色映射

此配置采用两个属性—values 和 colors—并将这些值映射到其各自的颜色。

如果未定义值，它将回退到 unknownColor，如果这也未定义，则回退到系列颜色。

此配置可用于条形图，以根据字符串类别设置颜色。

{
  type: 'ordinal';
  values: Value[];
  colors: string[];
  unknownColor?: string;
}

覆盖层

图表具有 loading 和 noData 覆盖层，在以下情况下出现：

  • loading 属性设置为 true。
  • 没有数据可显示。
按下 Enter 开始编辑

坐标轴显示

您可以提供坐标轴数据，以便在加载数据时显示它们。

自定义覆盖层

要修改覆盖层消息，您可以按如下方式使用 message 属性

<BarChart
  slotProps={{
    // Custom loading message
    loadingOverlay: { message: 'Data should be available soon.' },
    // Custom message for empty chart
    noDataOverlay: { message: 'Select some data to display.' },
  }}
/>

对于更高级的自定义，请使用以下演示中的 loadingOverlay 和 noDataOverlay 插槽链接。

样式

尺寸

默认情况下，图表会调整其尺寸以填充其父元素。但是，您可以通过提供 height 和/或 width 属性来修改此行为。

这些属性将图表的尺寸固定为给定的值（以像素为单位）。

位置

图表布局的核心是绘图区域，它对应于可用于表示数据的空间。

此空间可以使用 margin 属性及其属性 top、bottom、left 和 right 来定义。这些值定义了 SVG 边框和绘图区域之间的空间。

您可能需要修改这些值，以便为坐标轴刻度留出更多空间，或减少它们以提供更多数据空间。

import { BarChart } from '@mui/x-charts/BarChart';

<BarChart
  // ...
  margin={{
    left: 80,
    right: 80,
    top: 80,
    bottom: 80,
  }}
/>

游乐场

CSS

由于该库依赖 SVG 进行渲染，您可以像使用 CSS 覆盖其他 MUI 系统组件一样自定义它们。

图表组件接受 sx 属性。从这里，您可以使用其类名定位任何子组件。

- MUI 组件库Group AGroup BGroup CGroup DGroup E0204060

渐变和图案

可以使用渐变和图案来填充图表。这可以通过将您的渐变或图案定义作为图表组件的子元素传递来完成。

请注意，以这种方式定义的渐变或图案仅适用于 SVG。因此，像 color: "url(#Pattern)' 这样的直接定义将导致 HTML 元素（如工具提示）中出现未定义的颜色。该演示通过使用 CSS 变量 '--my-custom-pattern': 'url(#Pattern)' 并使用 color: 'var(--my-custom-pattern, #123456)' 指定回退颜色来解决此问题。

- MUI 组件库

在工具提示上使用渐变

在 HTML 中不直接支持定义为 SVG 元素的渐变。但是，您可以使用 gradient functions 在 CSS 中定义渐变。可以通过在工具提示组件上设置 sx 属性，而不是在前面的示例中使用的回退颜色，在工具提示中使用此渐变。

- MUI 组件库0050100