Question

是否可以将渐变颜色应用于nvd3中的区域（实线）图表。我在d3图表中看到了使用svg对象的解决方法。

但是有更简单的方法可以做到这一点，还是有任何黑客来完成同样的工作？

Answer 1

您的问题信息太少，但下面是带渐变的区域图表示例。

  <svg>
    <defs>
      <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
      </linearGradient>
    </defs>
  </svg>

在SVG中的渐变定义之后，在CSS中使用它：

.nv-area { fill: url(#grad3) }

＆＃13;

var data = [{
  "key": "Quantity",
  "bar": true,
  "area": true,
  "values": [
    [1301544000000, 2000],
    [1304136000000, 2500],
    [1306814400000, 1800],
    [1309406400000, 2100],
    [1312084800000, 2100],
    [1314763200000, 2800]
  ]
}]
nv.addGraph(function() {
  chart = nv.models.lineChart();

  chart.margin({
    left: 100,
    bottom: 100
  }).useInteractiveGuideline(true).showLegend(true).duration(250);
  chart.xAxis.axisLabel("Date").tickFormat(function(d) {
    var date = new Date(data[0].values[d][0]);
    return d3.time.format("%b-%e")(date);
  });
  chart.yAxis.axisLabel('Quantity').tickFormat(d3.format(',.2f'));

  chart.x(function(d, i) {
      return i
    })
    .y(function(d) {
      return d[1]
    })

  chart.showXAxis(true);

  d3.select('#chart svg').datum(data)
    .transition().call(chart);

  return chart;
});

＆＃13;

#chart svg {
  height: 400px;
}

.nv-area { fill: url(#grad3) }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://rawgit.com/novus/nvd3/master/build/nv.d3.js"></script>
<link href="https://rawgit.com/novus/nvd3/master/build/nv.d3.css" rel="stylesheet"/>

<div id="chart">
  <svg>
      <defs>
    <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  </svg>
</div>

＆＃13;

nvd3区域和条形图中的渐变色？

1 个答案: