我尝试根据本指南 nivo rocks 将渐变 css 添加到 Gradients 组件的折线图区域。但它不起作用。

示例截图

css - 如何将渐变 css 添加到 Nivo Rocks 折线图区域?-LMLPHP

我需要类似上面图表渐变的东西。这是我的代码,

    <ResponsiveLine
        data={data1}
        margin={{
            "top": 65,
            "right": 50,
            "bottom": 50,
            "left": 70
        }}
        yScale={{ type: 'linear', min: 0, max: 10 }}
        tooltip={tooltip}
        stacked={true}
        curve="monotoneX"
        axisTop={null}
        axisRight={null}
        axisBottom={{
            "tickSize": 5,
            "tickPadding": 5,
            "tickRotation": 0,
            "legend": "VIDEOS",
            "legendPosition": "middle",
            "legendOffset": 42
        }}
        axisLeft={{
            "tickSize": 5,
            "tickPadding": 5,
            "tickRotation": 0,
            "legend": "MARKS",
            "legendPosition": "middle",
            "legendOffset": -40
        }}
        defs={[{
            id: 'gradientC',
            type: 'linearGradient',
            colors: [
                { offset: 0, color: '#fff' },
                { offset: 100, color: '#000' },
            ],
        },]}
        fill={[
            { match: '*', id: 'gradientC' },
        ]}
        animate={true}
        enableGridY={false}
        colors={'linear-gradient(to bottom, #fff, #000)'}
        colorBy={'id'}
        lineWidth={6}
        dotSize={14}
        enableDots={false}
        dotColor="inherit:darker(0.3)"
        dotBorderWidth={2}
        dotBorderColor="#ffffff"
        enableDotLabel={true}
        dotLabel="y"
        dotLabelYOffset={-12}
        enableArea={true}
        areaOpacity={0.1}
        motionStiffness={90}
        motionDamping={15}
        legends={[]}
    />

这是我得到的

css - 如何将渐变 css 添加到 Nivo Rocks 折线图区域?-LMLPHP
提前致谢。

最佳答案

在这个聚会上有点晚了,但如果你仍然被卡住:

非常 hacky,但可以作为向 Nivo 折线图添加渐变的一个小工作。
为线性渐变创建一个 SVG def,然后通过颜色数组中的 url 引用它。

// these are just an example for the chart wrapper
const height = 300;
const width = 800;

const gradProps = {
  gradientUnits: 'userSpaceOnUse',
  x1: '0',
  y1: '0',
  x2: '0',
  y2: height
};


const Chart = () => (
  <div style={{ height, width }}>
    <svg>
      <defs>
        <linearGradient id="someGradientId" {...gradProps} >
          <stop offset="25%" stopColor="#ff0000" />
          <stop offset="100%" stopColor="rgba(255,255,255,0)" />
        </linearGradient>
      </defs>
    </svg>

    <ResponsiveLine
      data={chartData}
      colors={['url(#someGradientId)']}
      margin={{
        top: 2,
        bottom: 2
      }}
      dotSize={0}
      enableArea={true}
      enableGridX={false}
      enableGridY={false}
      curve={curve}
      axisBottom={{
        tickValues: []
      }}
    />
  </div>
);

然后还需要通过 css 覆盖线条笔划的颜色值
,作为
[stroke="url(#someGradientId)"] {
  stroke: #ff0000;
}

关于css - 如何将渐变 css 添加到 Nivo Rocks 折线图区域?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53361961/

10-09 20:03
查看更多