在Charts.js中将折线图提高*到1时出现问题，bkg填充*在图线下面

Question

我正在努力在Chart.js中创建折线图，以显示从高到低的上升趋势（希望如此）。想一想＃1最佳的逻辑，请问“您完成了什么地方”，“搜索排名位置是什么”。

我读了through the docs，但看不到该怎么做。我尝试了2种方法：

• 将数字设为负数（以便数字上升）
• 在选项中的reverse: true中添加ticks

这两个解决方案中的图表线都朝正确的方向前进，但是，实心部分是错误的区域。它在行上方而不是下方的区域着色。

我正在使用Chart.js v.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>