c3.js中带有渐变填充的黑色轮廓的面积图答案

【问题标题】：Area chart with black contour with gradient filling in c3.jsc3.js中带有渐变填充的黑色轮廓的面积图
【发布时间】：2018-04-12 08:55:57
【问题描述】：

我有渐变颜色的面积图。但我需要我的轮廓始终是纯黑色。

代码：

<Chart id={'graph'}
oninit={ () => {
  ChartData[0]['desired'] = desired;
  ChartData[ChartData.length-1]['desired'] = desired;
  const gradient = d3.select('svg')
    .append("linearGradient")
    .attr('id', 'gradient')
    .attr('x1', '40%').attr('y1', '0%')
    .attr('x2', '50%').attr('y2', '100%');

  gradient
    .append('stop')
    .attr('offset', '30%')
    .attr('stop-color', '#000000')
    .attr('stop-opacity', '1');

  gradient
    .append('stop')
    .attr('offset', '100%')
    .attr('stop-color', '#FFFFFF')
    .attr('stop-opacity', '1');
}}
legend= {{show:false}}
padding= {{
 right: 30,
 left: 50}}
data= {{
  json: ChartData,
  labels: true,
  keys: {
    x: 'date',
    value:  ['value','desired']
  },
  colors: {
    value:'url(#gradient)',
    desired: 'red'
  },
  types:{
    value:'area-spline',
    desired:'line'
  },

我有什么：

如您所见，在低点，轮廓几乎是白色的，这不符合我的要求。

【问题讨论】：

用简单的 CSS 很容易修复。
@dfsq 我试过 .c3-line { stroke: black !important;但后来我的红线变成了黑色
已修复。只需添加到 CSS .c3-line-[column-name] { stroke-width: 1.5px !important;中风：黑色！重要； }

标签： javascript c3.js

【解决方案1】：

已修复。只需添加到 CSS

.c3-line-[column-name] {
    stroke-width: 1.5px !important;
    stroke: black !important;
}

【讨论】：