圖表 - 標籤

標籤是系列或資料的文字參考。

基本顯示

若要設定系列的標籤，您可以傳入 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' 以在工具提示中格式化標籤
'arc' 當 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',
    },
  ]}
/>

<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 和 class 的完整參考。