我尝试根据本指南 nivo rocks 将渐变 css 添加到 Gradients 组件的折线图区域。但它不起作用。
示例截图
我需要类似上面图表渐变的东西。这是我的代码,
<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={[]}
/>
这是我得到的
提前致谢。
最佳答案
在这个聚会上有点晚了,但如果你仍然被卡住:
非常 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/