如何向chartjs中的插件添加第二个功能？

Question

我有这个。

  type: 'line',
  data: data,
  options: options,
  plugins: [{
    id: "responsiveGradient",

    afterLayout: function(downChart) {
      console.log(downChart);
      let scales = downChart.scales;
      let color = downChart.ctx.createLinearGradient(0, scales["x-axis-0"].top, 0, 0);

      //let chartColors = getChartColors(status);
      color.addColorStop(0, "rgba(0, 181, 63, 0.01)");
      color.addColorStop(1, "rgba(0, 181, 63, 0.6)");

      downChart.data.datasets[0].backgroundColor = color;
    },
  }]
});

我需要在“afterLayout”键之后添加第二个函数。

更多信息在这里： https : //www.chartjs.org/docs/latest/developers/plugins.html

Answer 1

定义并调用要在调用 afterLayout 处理程序时运行的两个函数：

function func1(downChart) {
    console.log(downChart);
    let scales = downChart.scales;
    let color = downChart.ctx.createLinearGradient(0, scales["x-axis-0"].top, 0, 0);

    //let chartColors = getChartColors(status);
    color.addColorStop(0, "rgba(0, 181, 63, 0.01)");
    color.addColorStop(1, "rgba(0, 181, 63, 0.6)");

    downChart.data.datasets[0].backgroundColor = color;
};

function func2(downChart) {
    ....
};

然后在匿名函数中，你可以调用上面的两个。

type: 'line',
data: data,
options: options,
plugins: [{
    id: "responsiveGradient",

    afterLayout: function(downChart) {
        func1(downChart);
        func2(downChart);
      },
    }]
});