在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
在他的示例中),并且正在寻找一种无需它即可创建渐变的方法。
您应该学会自己创建余烬组件,而无需依赖第三方。否则,您作为开发人员的生活将永远充满挣扎。当第三方组件本身如此简单时,在这种情况下尤其令人难过。
您将需要:
ember-cli-chart
从package.json中删除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
您可以随心所欲地制作图表人们经常过度使用第三方余烬组件。有时使用第三方组件很有意义:复杂时可以提供足够的灵活性和价值。但是经常使用第三方组件只会限制您。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句