javascript - 在 Chartjs 中让折线图*向上*到 1 时出现问题，在*图表线下方*有大填充

Question

我正致力于在 Chart.js 中创建折线图以显示(希望)从高到低的上升趋势。想想“你完成了什么地方”、“什么搜索排名位置”等 #1 是最好的逻辑。

我读了through the docs并没有看到如何做到这一点。我尝试了两种方法:

• 使数字为负(因此它会上升)
• 在选项中的 ticks 中添加 reverse: true

这两种解决方案的图表线都朝着正确的方向移动，但是，填充部分是错误的区域。它在线上方的区域着色，而不是在线下方。

我正在使用 Chart.js v. 2.7.2

这是我运行它的脚本

var ctx = document.getElementById('all-canvas').getContext("2d");
var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
gradientStroke.addColorStop(0, '#ca38d4');
gradientStroke.addColorStop(1, '#d43842');
var myChart = new Chart(ctx, {
  "type": "line",
  "data": {
    "labels": ["september", "October", "November", "December", "January", "February", "March", "April", "May", "June", "July"],
    "datasets": [{
      "data": [75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 78.833333333333, 70, 72.333333333333],
      "fill": true,
      backgroundColor: gradientStroke,
      borderColor: gradientStroke,
      "spanGaps": false,
      radius: 0
    }]
  },
  "options": {
    "legend": {
      "display": false
    },
    scales: {
      yAxes: [{
        ticks: {
          fontColor: "transparent",
          padding: 20,
          beginAtZero: true,
          reverse: true
        },
        gridLines: {
          drawTicks: false,
          display: false
        }

      }],
      xAxes: [{
        gridLines: {
          drawTicks: false,
          display: false
        },
        ticks: {
          padding: 20,
          fontColor: "transparent"
        }
      }]
    }
  },
  "fill": true
});

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="all-canvas"></canvas>

当我的图表上升到 1 时，知道如何在图表线下方获取填充线吗？

Answer 1

文档并不明显，它位于“面积图”下，但您可以 control the 'direction' of the fill using the fill option .

我发现查看 sample charts 更容易清楚地显示每个选项的作用。

在数据集中设置 fill: 'start' 会反转图表中的效果:

var ctx = document.getElementById('all-canvas').getContext("2d");
var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
gradientStroke.addColorStop(0, '#ca38d4');
gradientStroke.addColorStop(1, '#d43842');
var myChart = new Chart(ctx, {
  "type": "line",
  "data": {
    "labels": ["september", "October", "November", "December", "January", "February", "March", "April", "May", "June", "July"],
    "datasets": [{
      "data": [75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 75.833333333333, 78.833333333333, 70, 72.333333333333],
      "fill": 'start',
      backgroundColor: gradientStroke,
      borderColor: gradientStroke,
      "spanGaps": false,
      radius: 0
    }]
  },
  "options": {
    "legend": {
      "display": false
    },
    scales: {
      yAxes: [{
        ticks: {
          fontColor: "transparent",
          padding: 20,
          beginAtZero: true,
          reverse: true
        },
        gridLines: {
          drawTicks: false,
          display: false
        }

      }],
      xAxes: [{
        gridLines: {
          drawTicks: false,
          display: false
        },
        ticks: {
          padding: 20,
          fontColor: "transparent"
        }
      }]
    }
  }
});

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="all-canvas"></canvas>