圖表 - 線條示範

此頁面彙集了線條圖的示範。

SimpleLineChart

<LineChart
  width={500}
  height={300}
  series={[
    { data: pData, label: 'pv' },
    { data: uData, label: 'uv' },
  ]}
  xAxis={[{ scaleType: 'point', data: xLabels }]}
/>

<LineChart
  width={500}
  height={300}
  series={[
    { data: pData, label: 'pv' },
    { data: uData, label: 'uv' },
  ]}
  xAxis={[{ scaleType: 'point', data: xLabels }]}
/>

按下 Enter 鍵開始編輯

TinyLineChart

DashedLineChart

BiaxialLineChart

<LineChart
  width={500}
  height={300}
  series={[
    { data: pData, label: 'pv', yAxisId: 'leftAxisId' },
    { data: uData, label: 'uv', yAxisId: 'rightAxisId' },
  ]}
  xAxis={[{ scaleType: 'point', data: xLabels }]}
  yAxis={[{ id: 'leftAxisId' }, { id: 'rightAxisId' }]}
  rightAxis="rightAxisId"
/>

<LineChart
  width={500}
  height={300}
  series={[
    { data: pData, label: 'pv', yAxisId: 'leftAxisId' },
    { data: uData, label: 'uv', yAxisId: 'rightAxisId' },
  ]}
  xAxis={[{ scaleType: 'point', data: xLabels }]}
  yAxis={[{ id: 'leftAxisId' }, { id: 'rightAxisId' }]}
  rightAxis="rightAxisId"
/>

按下 Enter 鍵開始編輯

LineChartWithReferenceLines

LineChartConnectNulls

<LineChart
  xAxis={[{ data: xData, scaleType: 'point' }]}
  series={[{ data }]}
  height={200}
  margin={{ top: 10, bottom: 20 }}
/>
<LineChart
  xAxis={[{ data: xData, scaleType: 'point' }]}
  series={[{ data, connectNulls: true }]}
  height={200}
  margin={{ top: 10, bottom: 20 }}
/>

<LineChart
  xAxis={[{ data: xData, scaleType: 'point' }]}
  series={[{ data }]}
  height={200}
  margin={{ top: 10, bottom: 20 }}
/>
<LineChart
  xAxis={[{ data: xData, scaleType: 'point' }]}
  series={[{ data, connectNulls: true }]}
  height={200}
  margin={{ top: 10, bottom: 20 }}
/>

按下 Enter 鍵開始編輯

帶有預測的線條

為了表示資料的不同部分具有不同的含義，您可以為每個部分渲染風格化的線條。

在以下範例中，圖表顯示虛線以例示資料是估計值。為此，slots.line 設定了自訂組件，該組件會渲染預設線條兩次。

第一條線被裁剪以顯示已知值（從圖表的左側到限制）。
第二條線被裁剪以顯示預測（從限制到圖表的右側），並帶有虛線樣式。

<LineChart
  series={[
    {
      type: 'line',
      data: [1, 2, 3, 4, 1, 2, 3, 4, 5],
      valueFormatter: (v, i) => `${v}${i.dataIndex > 5 ? ' (estimated)' : ''}`,
    },
  ]}
  xAxis={[{ data: [0, 1, 2, 3, 4, 5, 6, 7, 8] }]}
  height={200}
  width={400}
  slots={{ line: CustomAnimatedLine }}
  slotProps={{ line: { limit: 5 } as any }}
  sx={{ '& .line-after path': { strokeDasharray: '10 5' } }}
/>

<LineChart
  series={[
    {
      type: 'line',
      data: [1, 2, 3, 4, 1, 2, 3, 4, 5],
      valueFormatter: (v, i) => `${v}${i.dataIndex > 5 ? ' (estimated)' : ''}`,
    },
  ]}
  xAxis={[{ data: [0, 1, 2, 3, 4, 5, 6, 7, 8] }]}
  height={200}
  width={400}
  slots={{ line: CustomAnimatedLine }}
  slotProps={{ line: { limit: 5 } as any }}
  sx={{ '& .line-after path': { strokeDasharray: '10 5' } }}
/>

按下 Enter 鍵開始編輯

API

請參閱以下文件，以獲取此處提及的組件可用的所有 props 和 classes 的完整參考。