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

格里科

在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在他的示例中),并且正在寻找一种无需它即可创建渐变的方法。

根纳季·多加耶夫(Gennady Dogaev)

您应该学会自己创建余烬组件,而无需依赖第三方。否则,您作为开发人员的生活将永远充满挣扎。当第三方组件本身如此简单时,在这种情况下尤其令人难过

您将需要:

  1. ember-cli-chart从package.json中删除
  2. npm install chart.js --save-dev
  3. ember-cli-build.js文件添加中app.import('node_modules/chart.js/dist/Chart.js');(查看node_modules目录以确保这是正确的路径)
  4. ember-chart.jsapp/components目录中创建并将组件的代码放在此处。对于代码本身,您可以从ember-cli-chart复制
  5. 现在,didInsertElement您可以随心所欲地制作图表

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

无法创建使用chart.js之独立图表

chart.js无法创建图表:无法从给定项目获取上下文

是否可以在图表JS中使用mouseenter和mouseleave事件?

使用chart.js创建动态图表

highchart打印图表/图表上下文菜单不可单击

是否可以访问使用Blaze.render()加载的模板的父数据上下文?

在金字塔中使用URLDispatch时,上下文谓词是否有用?

访问已创建的Chart.js图表

运行Node.js + Express.js时访问AWS Lambda上下文

是否可以在Django模板的任何地方使用新创建的上下文变量?

(Vue,ChartJS)从子组件画布上下文为图表创建渐变背景

使用angular。使用chart.js创建动态数量的图表

使用Jest / Enzyme测试Chart.js-无法创建图表:无法从给定项目获取上下文

HighCharts:如何从图表容器中添加或删除“图表上下文菜单”?

在Web API,实体框架中使用n层体系结构时,数据访问层中的上下文为null

使用Chart.js和PHP动态创建图表

创建StatefulWidget时访问Flutter上下文

是否可以在小部件中使用上下文?

是否可以为Chart.js图表中的每个数据集值定义数据属性?

是否可以在其他上下文中使用带有响应(钩子)的上下文?

在next.js中使用带有useReducer钩子的上下文Api可以在调用useContext时返回未定义的

使用上下文API时如何在React JS中使用Match道具

使用使用opDispatch的类时,是否有任何IDE可以提供上下文帮助?

核心图:点击图表时出现“无效上下文”错误

发生名称冲突时,是否可以访问全局上下文中定义的变量?

是否可以在 Visual Studio 2017 的直接窗口中使用数据上下文?

当在函数内部创建图表时,销毁 chart.js 不起作用 - chart.destroy() 不是函数

是否可以在 epplus 中创建动态图表?

在 React JS 中使用路由器时如何使用上下文 API 传递状态