图表 - 标签

标签是系列或数据的文本引用。

基本显示

要设置系列的标签，您可以传入一个 string 作为系列的属性 label。提供的标签将在不同的位置可见，例如图例或工具提示。

<BarChart
  {...props}
  series={[
    {
      data: [2400, 1398, 9800],
      label: 'label 1',
    },
  ]}
/>

<BarChart
  {...props}
  series={[
    {
      data: [2400, 1398, 9800],
      label: 'label 1',
    },
  ]}
/>

按 Enter 键开始编辑

条件格式化

label 属性也接受一个 function，允许您根据位置更改标签内容。

该函数接收 location 作为其第一个参数，它可以具有以下值

'legend' 用于格式化图例中的标签
'tooltip' 用于格式化工具提示中的标签

<BarChart
  {...props}
  series={[
    { data: [2400, 1398, 9800], label: 'simple label' },
    { data: [500, 2398, 4300], label: (location) => `${location} label` },
  ]}
/>

<BarChart
  {...props}
  series={[
    { data: [2400, 1398, 9800], label: 'simple label' },
    { data: [500, 2398, 4300], label: (location) => `${location} label` },
  ]}
/>

按 Enter 键开始编辑

饼图

饼图由于其性质而表现不同。它具有每个切片的标签，而不是每个系列的标签。它还有一个可以渲染标签的位置。

它不是将 label 作为系列的一部分接收，而是将其作为系列内 data 集的一部分接收。

它的 location 参数可以具有以下值

'legend' 用于格式化图例中的标签
'tooltip' 用于格式化工具提示中的标签
当 arcLabel 设置为 'label' 时，'arc' 用于格式化弧形标签

<PieChart
  {...props}
  series={[
    {
      data: [
        { id: 0, value: 10, label: (location) => `${location}+A` },
        { id: 1, value: 15, label: (location) => `${location}+B` },
        { id: 2, value: 20, label: (location) => `${location}+C` },
      ],
      type: 'pie',
      arcLabel: 'label',
    },
  ]}
/>

<PieChart
  {...props}
  series={[
    {
      data: [
        { id: 0, value: 10, label: (location) => `${location}+A` },
        { id: 1, value: 15, label: (location) => `${location}+B` },
        { id: 2, value: 20, label: (location) => `${location}+C` },
      ],
      type: 'pie',
      arcLabel: 'label',
    },
  ]}
/>

按 Enter 键开始编辑

API

请参阅下面的文档，以获得此处提及的组件的所有可用 props 和类的完整参考。