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中采用一种干净的方法来解决此问题。

编辑：

为澄清起见，我理解可以按照以下Neophytte的建议进行操作。问题是我无法访问图表上下文（在他的示例中为var ctx），并且正在寻找一种无需它即可创建渐变的方法。

Answer 1

您应该学会自己创建余烬组件，而不必依赖于第三方。否则，您作为开发人员的生活将始终充满挣扎。当第三方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目录以确保这是正确的路径）
在ember-chart.js目录中创建app/components并将组件的代码放在此处。对于代码本身，您可以从ember-cli-chart
现在在didInsertElement中，您可以随心所欲地绘制图表

人们经常过度使用第三方余烬组件。有时使用第三方组件很有意义：复杂时可以提供足够的灵活性和价值。但是经常使用第三方组件只会限制您。

Answer 2

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

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

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

2 个答案: