Nivo ResponsiveLineCanvas组件Markers不显示问题求助

问题分析 #

在Nivo 0.80.0版本中，ResponsiveLineCanvas（Canvas渲染折线图）与ResponsiveLine（SVG渲染折线图）的标记配置存在差异：SVG版本默认启用标记功能，但Canvas版本默认关闭标记功能——即便你在layers数组中添加了"markers"，也必须显式开启才能生效。

解决方案 #

在ResponsiveLineCanvas的配置中添加enableMarkers={true}，即可让标记正常显示。

修改后的代码示例 #

import React from "react";
import { ResponsiveLineCanvas } from "@nivo/line";

const commonProperties = {
  width: 900,
  height: 400,
  margin: { top: 20, right: 20, bottom: 60, left: 80 },
  animate: true,
  enableSlices: "x"
};
const App = () => (
  <div style={{ height: 600 }}>
    <ResponsiveLineCanvas
      {...commonProperties}
      data={[
        {
          id: "Id of serie",
          data: [
            { x: 0, y: 0.2 },
            { x: 1, y: 0.3 },
            { x: 2, y: 0.5 },
            { x: 3, y: 0.4 },
            { x: 4, y: 0.3 },
            { x: 5, y: 0.5 },
            { x: 6, y: 0.3 },
            { x: 7, y: 0.1 }
          ]
        }
      ]}
      markers={[
        {
          axis: "x",
          value: 2,
          lineStyle: { stroke: "#6aa84f", strokeWidth: 3, opacity: 0.95 },
          legend: "Budget line"
        }
      ]}
      // 显式开启标记功能
      enableMarkers={true}
      layers={[
        "grid",
        "axes",
        "areas",
        "lines",
        "points",
        "slices",
        "mesh",
        "legends",
        "markers"
      ]}
      enableGridX={false}
      colors={["rgb(97, 205, 187)", "rgb(244, 117, 96)"]}
      xScale={{
        type: "linear"
      }}
      yScale={{
        type: "linear",
        stacked: false,
        min: 0,
        max: 1
      }}
      enableArea={true}
      areaOpacity={1}
      enableSlices={false}
      useMesh={true}
      crosshairType="cross"
    />
  </div>
);
export default App;

补充说明 #

• 需确保layers数组中包含"markers"，保证标记层被纳入渲染流程；
• Canvas版本组件的部分特性默认配置与SVG版本存在差异，使用时建议查阅对应组件的API文档确认启用状态。

内容的提问来源于stack exchange，提问作者JeanValjean