Question

我正在使用Chart.js构建图表，并尝试用渐变填充线下的空间，但是我希望渐变基于线而不是画布。例如this是标准渐变，渐变基于总高度而不是线高。

我想做的是使渐变跟随线条的高度。到目前为止，我已经尝试了阴影和不同的渐变填充，但是无法获得理想的效果。例如This design是我要实现的目标。

var ctx = document.getElementById( 'large-line-FUA' ).getContext('2d');
var gradientStroke = ctx.createLinearGradient(0, 0, 0, 100);
gradientStroke.addColorStop(0, "#2aabdb");
gradientStroke.addColorStop(1, "rgba(42, 171, 219,0.2)");

var myChart = new Chart( ctx, {
  type: "line",
  data: {
    labels: [ "JAN", "FEB", "MAR", "APR", "MAY", "JUN" ],
    datasets: [
      {
        label: 'Cash',
        data: [ 12, 19, 3, 5, 2, 3 ],
        borderColor: "#2aabdb",
        backgroundColor:gradientStroke,
        pointRadius: 5,
        pointBorderWidth:2,
        pointBorderColor: "#FFF",
        pointBackgroundColor: "#2aabdb",
      },
    ]
  },
  options: {
    legend: {
      display: true,
    },
    tooltips: {
      enabled: true,
    },
    scales: {
      xAxes: [
        {
          display: true,
          gridLines: {
            display: false,
          },
        } ],
      yAxes: [ 
      {
        display: true,
        ticks: {
          beginAtZero: true,
        },
      } ],
    }
  }
} );

.container {
  width: 80%;
  margin: 15px auto;
}
.limiter {
  width:500px;
  height:500px;
}

  
<div class="container">
  <div class="limiter">
    <canvas id="large-line-FUA"></canvas>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js "></script>

基于行位置的Chart.js渐变填充

0 个答案: