Цвет градиента в области nvd3 и гистограммы?

Можно ли применить градиентный цвет к диаграммам с областями (закрашенными линиями) в nvd3. Я видел обходной путь в диаграммах d3, используя объект svg.

Но есть ли более простой способ сделать это или какой-нибудь хак, чтобы сделать то же самое?


gradient nvd3.js angular-nvd3
person Anish Nair    schedule 12.12.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Слишком мало информации в вашем вопросе, однако ниже приведен пример диаграммы с областями с градиентом.

Это основано на градиентах SVG:

  <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) }


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;
});
#chart svg {
  height: 400px;
}

.nv-area { fill: url(#grad3) }
<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>

person beaver    schedule 21.12.2017