创建图表时，我可以在 Chart.js 中使用渐变而不访问图表上下文吗？

Question

在Chart.js中，是否可以通过在创建图表时传入数据或选项来创建背景颜色为渐变的图表仅？

我看到的所有教程都涉及在创建图表时在图表上下文中调用 createLinearGradient，然后通过 backgroundColor 选项传入渐变对象。

理想情况下，我希望能够通过执行以下操作将数据传递到我的图表：

datasets: [
  {
    data: myData,
    backgroundColor: "linear-gradient(#FF0000, #00FF00)"
  }
]

或者，如果在没有图表上下文的情况下绝对不可能创建渐变，则使用类似的东西：

datasets: [
  {
    data: myData,
    backgroundColor: (ctx) => {
      let gradient = ctx.createLinearGradient(0, 0, 100, 0);
      gradient.addColorStop(0, '#FF0000');
      gradient.addColorStop(0, '#00FF00');
      return gradient;
    }
  }
]

我无法触及图表上下文（或者至少，这样做会非常困难而且相当笨拙）因为我正在使用 ember-cli-chart，据我所知，它不提供访问图表上下文的方法。

我也很高兴在 Ember 中有一个干净的方法来解决这个问题，如果那里有建议的话。

编辑：

澄清一下，我知道这可以按照下面的建议来完成。问题是我无法访问图表上下文（var ctx 在他的示例中）并且我正在寻找一种方法来创建没有它的渐变。

Answer 1

我发现这样做的方法是添加多个站点：

var ctx = document.getElementById("myChart").getContext("2d");
var gradientStroke = ctx.createLinearGradient(0, 1200, 0, 0);
gradientStroke.addColorStop(0, "#80b6f4");
gradientStroke.addColorStop(0.2, "#94d973");
gradientStroke.addColorStop(0.4, "#80b6f4");
gradientStroke.addColorStop(1, "#94d973");

希望能帮助您入门

示例：http://neophytte.mine.nu/portfolio/skills2.html

Answer 2

您应该学会自己创建 ember 组件，w/o 依赖第 3 方。否则你作为开发者的生活将永远充满挣扎。在这种情况下尤其令人难过，因为第 3 方 component 本身是如此简单。

您将需要：

从 package.json

ember-cli-chart

npm install chart.js --save-dev
在 ember-cli-build.js 文件中添加 app.import('node_modules/chart.js/dist/Chart.js');（查看 node_modules 目录以确保这是正确的路径）
在 app/components 目录中创建 ember-chart.js 并将组件的代码放在那里。对于代码本身，您可以从 ember-cli-chart
现在 didInsertElement 您可以随心所欲地处理图表

人们经常过度使用第 3 方 ember 组件。有时使用 3rd 方组件是有意义的：当它很复杂并提供足够的灵活性和价值时。但经常使用 3rd 方组件只会限制你。

创建图表时，我可以在 Chart.js 中使用渐变而不访问图表上下文吗？

Can I use a gradient in Chart.js without accessing the chart context when the chart is created?

ember.js

chart.js