面积图与黑色轮廓与渐变填充c3.js

时间:2018-04-12 08:55:57

标签: javascript c3.js

我有渐变色的面积图。但是我需要我的轮廓总是黑色。

代码:

<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'
  }, 

我有什么:enter image description here

正如您所看到的,在低点,轮廓几乎是白色,这不符合我的要求。

1 个答案:

答案 0 :(得分:0)

固定。 只需添加到CSS

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