有没有一种方法可以为包含多个折线的折线图中的一个特定折线添加阴影？

Question

我正在尝试为图表中的一条特定线添加阴影。

这在某种程度上有所帮助，但还不够： https://stackoverflow.com/a/33124653/4500286

我在React项目中使用"react-chartjs-2": "2.7.6"软件包。 我想出了什么，为所有行添加了阴影。.我似乎找不到一种为每个数据集添加阴影的方法。

我已经将此代码放在componentWillMount的前面，该代码为所有行添加了阴影（这不是我想要的）

    Chart.pluginService.register({
      id: 'dropShadow',
      afterDraw: function (chart, easing) {
        console.log(chart);
        let originial = this;
        const { ctx } = chart;
        let originalStroke = ctx.stroke;
        ctx.stroke = function () {
          ctx.save();
          ctx.shadowColor = '#C4A4BF';
          ctx.shadowBlur = 7;
          ctx.shadowOffsetX = 0;
          ctx.shadowOffsetY = 0;
          originalStroke.apply(this, arguments)
          ctx.restore();
        }
      }
    });

这是我尝试构建的代码的微型示例

import React from 'react';
import mediaPlanner from '../api/mediaPlanner';
import {Line,Chart} from "react-chartjs-2";


class Revenue extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      data: {}
    }

    this.graphDataSample = {
      forecastRevenue: ["3000", "3500", "3500"]
      revenue: ["1000", "3000", "5000"]
      timestamp: ["2019-02-01", "2019-02-02", "2019-02-03"] 
    }
    // get up the options of the graph
    this.options = {
      maintainAspectRatio: false,
      legend: {
        display: true,
        position: 'bottom',
        labels: {
          fontColor: 'rgb(255,255,255)',
        }
      },
      tooltips: {
        backgroundColor: "#f5f5f5",
        titleFontColor: "#333",
        bodyFontColor: "#666",
        bodySpacing: 4,
        xPadding: 12,
        mode: "nearest",
        intersect: 0,
        position: "nearest"
      },
      responsive: true,
      scales: {
        yAxes: [
          {
            barPercentage: 1.6,
            gridLines: {
              drawBorder: false,
              color: "rgba(29,140,248,0.0)",
              zeroLineColor: "transparent"
            },
            ticks: {
              suggestedMin: 60,
              suggestedMax: 125,
              padding: 20,
              fontColor: "#9a9a9a"
            }
          }
        ],
        xAxes: [
          {
            barPercentage: 1.6,
            gridLines: {
              drawBorder: false,
              color: "rgba(29,140,248,0.1)",
              zeroLineColor: "transparent"
            },
            ticks: {
              padding: 20,
              fontColor: "#9a9a9a"
            }
          }
        ]
      }
    };
  }

  componentWillMount = () => {
      // supposed to make an api call to get the data returned
      // by graphDataSample

    // adds the drop shadow to both revenue and forecast revenue
    // I only want to add it to the forecast revenue

    Chart.pluginService.register({
      id: 'dropShadow',
      afterDraw: function (chart, easing) {
        console.log(chart);
        let originial = this;
        const { ctx } = chart;
        let originalStroke = ctx.stroke;
        ctx.stroke = function () {
          ctx.save();
          ctx.shadowColor = '#C4A4BF';
          ctx.shadowBlur = 7;
          ctx.shadowOffsetX = 0;
          ctx.shadowOffsetY = 0;
          originalStroke.apply(this, arguments)
          ctx.restore();
        }
      }
    });

    this.setState({data: function(canvas){
      return {
        labels: this.graphDataSample.timestamp, // X-axis
        datasets: [
          {
            fill: false,
            borderColor: "#6C6C74",
            borderWidth: 3,
            borderDash: [],
            borderDashOffset: 0.0,
            pointBackgroundColor: "#6C6C74",
            pointHoverRadius: 0,
            pointHoverBorderWidth: 10,
            pointBorderWidth: 0,
            steppedLine: false,
            pointRadius: 0,
            label: "Revenue ($)",
            data: this.graphDataSample.revenue, // Y-axis
          },
          {
            fill: false,
            borderColor: "red",
            borderWidth: 3,
            borderDash: [],
            borderDashOffset: 0.0,
            pointBackgroundColor: "red",
            pointHoverRadius: 0,
            pointHoverBorderWidth: 10,
            pointBorderWidth: 0,
            steppedLine: false,
            pointRadius: 0,
            label: "Forecast Revenue ($)",
            data: this.graphDataSample.forecastRevenue, // Y-axis
          }
        ]
      };
    }});
  }

  render() {
    return (
        <Line
          data={this.state.data}
          options={this.options}
        />
    );
  }
}
export default Revenue;

正如我所说，在我的案例中，预期是在一行上添加阴影是预测收入而不是收入 这是屏幕截图https://drive.google.com/file/d/1LjLyXEPGlgqlE1AziUQdf0GZJptwVEyf/view?usp=sharing