chart.js - 使用 ChartJS 在堆积折线图上添加线条

Question

我正在尝试在背景线上使用堆叠选项重新创建下面的图表

但是我的尝试没有成功，结果如下图

$(function() {
  var areaChartCanvas = $('#areaChart').get(0).getContext('2d')

  var areaChartData = {
    labels: ['', '', ''],
    datasets: [{
      backgroundColor: 'transparent',
      borderColor: 'black',
      pointRadius: false,
      data: [32, 12, 28],
      type: 'line'
    }, {
      backgroundColor: 'red',
      pointRadius: false,
      data: [20, 20, 20]
    }, {
      backgroundColor: 'orange',
      pointRadius: false,
      data: [40, 40, 40]
    }, {
      backgroundColor: 'cyan',
      pointRadius: false,
      data: [60, 60, 60]
    }]
  }

  var areaChartOptions = {
    maintainAspectRatio: false,
    responsive: true,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: true,
        }
      }],
      yAxes: [{
        gridLines: {
          display: true,
        },
        stacked: true
      }]
    }
  }
  var areaChart = new Chart(areaChartCanvas, {
    type: 'line',
    data: areaChartData,
    options: areaChartOptions
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="areaChart" style="height:250px"></canvas>

理想情况下，我希望能够创建具有不同颜色的“区域”，这些颜色将根据我传递给它的间隔进行堆叠。

例如:

青色 - 20

橙色 - 20

红色 - 20

但目前，我正在做

青色 - 60

橙色 - 40

红色 - 20

Answer 1

如果我理解正确的话，我考虑了不同的方法并用 Plugin 扩展了图表。 ^[1](灵感来自 https://stackoverflow.com/a/49303362/863110)

Chart.pluginService.register({
  beforeDraw: function (chart, easing) {
    if (chart.config.options.fillColor) {
      var ctx = chart.chart.ctx;
      var chartArea = chart.chartArea;
      ctx.save();
      let delta = 0;
      const chartHeight = chartArea.bottom - chartArea.top;
      const bottomBarHeight = chart.height - chartHeight - chartArea.top;
      chart.config.options.fillColor.map(color => {
        const colorHeight = chartHeight * (color[0] / 100);
        const colorBottom = chartArea.bottom + colorHeight;
        ctx.fillStyle = color[1];

        const x = chartArea.left,
              y = chart.height - bottomBarHeight - colorHeight - delta,
              width = chartArea.right - chartArea.left,
              height = colorHeight;

        delta += height;
        ctx.fillRect(x, y, width, height);
        ctx.restore();
      })
    }
  }
});

var chartData = {
  labels: ['a', 'b', 'c', 'd'],
  datasets: [{
    label: 'value',
    borderColor: 'blue',
    data: [30, 50, 25, 10]
  }]
};

var ctx = document.getElementById("myChart").getContext("2d");
var myBar = new Chart(ctx, {
  type: 'line',
  data: chartData,
  options: {
    scales: {
      yAxes: [{ ticks: { max: 60 } }]
    },
    legend: { display: false },
    fillColor: [
      [20, 'red'],
      [20, 'blue'],
      [20, 'green'],
      [20, 'pink'],
      [20, 'yellow'],
    ]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

<canvas id="myChart" height="300" width="500"></canvas>

https://jsbin.com/lisuvuq/2/edit?js,output

---

^[1] - 使用插件，您可以自定义图表的行为。当您使用插件时，您将获得一个 API，以便您可以“监听”图表的生命周期事件(例如 beforeDraw)并调用您自己的代码。 API 调用您的函数并为您提供有关图表的数据，以便您可以在代码中使用它。
在此示例中，我们使用 API 来 (1) 在绘制图表之前运行代码 (2)使用数据计算不同颜色的面积。 (3) 根据计算结果绘制附加形状(ctx.fillRect)。