在Nivo @nivo/ResponsiveLine中添加一条与x轴平行的简单目标线

基础概念

Nivo 是一个基于 React 和 D3.js 的数据可视化库，提供了多种图表组件，其中 @nivo/ResponsiveLine 是用于绘制响应式折线图的组件。目标线（Target Line）通常用于在图表中标记特定的目标值或阈值，以便于用户直观地比较实际数据与目标值。

类型

目标线可以分为以下几种类型：

水平目标线：与 x 轴平行的目标线。
垂直目标线：与 y 轴平行的目标线。
斜线目标线：与 x 轴和 y 轴都不平行的目标线。

应用场景

目标线常用于以下场景：

性能监控：标记性能阈值，如 CPU 使用率、内存使用率等。
销售目标：标记销售目标，便于比较实际销售额与目标销售额。
健康指标：标记健康指标的正常范围，如心率、血压等。

添加一条与 x 轴平行的简单目标线

要在 @nivo/ResponsiveLine 中添加一条与 x 轴平行的目标线，可以使用 targetLines 属性。以下是一个示例代码：

import React from 'react';
import { ResponsiveLine } from '@nivo/line';

const data = [
  {
    id: 'series-1',
    data: [
      { x: 'Jan', y: 40 },
      { x: 'Feb', y: 50 },
      { x: 'Mar', y: 60 },
      // 其他数据点
    ],
  },
];

const App = () => {
  return (
    <ResponsiveLine
      data={data}
      margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
      xScale={{ type: 'point' }}
      yScale={{
        type: 'linear',
        stacked: false,
        min: 'auto',
        max: 'auto',
      }}
      axisTop={null}
      axisRight={null}
      axisBottom={{
        orient: 'bottom',
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: 'date',
        legendPosition: 'middle',
        legendOffset: 32,
      }}
      axisLeft={{
        orient: 'left',
        tickSize: 5,
        tickPadding: 5,
        tickRotation: 0,
        legend: 'value',
        legendPosition: 'middle',
        legendOffset: -70,
      }}
      colors={{ scheme: 'nivo' }}
      pointSize={10}
      pointColor={{ from: 'color', modifiers: [] }}
      pointBorderWidth={2}
      pointBorderColor={{ from: 'color', modifiers: [] }}
      pointLabelYOffset={-12}
      useMesh={true}
      targetLines={[
        {
          id: 'target-line-1',
          value: 50, // 目标值
          color: 'red', // 目标线颜色
          width: 2, // 目标线宽度
        },
      ]}
    />
  );
};

export default App;