CanvasJS React-如何在处理单击事件的同时使饼图切片突出显示(又名爆炸)

路易·桑基

我正在React中工作,并使用来自canvasjs的饼图:https ://canvasjs.com/docs/charts/chart-types/html5-pie-chart/

图表具有用于处理事件的可选“单击”功能。这是该文档。https://canvasjs.com/docs/charts/chart-options/data/click/

问题是当我实现“单击”并调用一个函数来更新我的标签(在父组件中)时,它会更改默认行为,并且不再扩展切片。

我已经尝试了许多不同的方法来解决它,但是看来我无法解决这个问题。

此代码可用于更新父级中的标签-注意“ click:this.props.onSliceSelected”行。然后,我可以从事件中获取切片标签并更新标签。

但是如上所述,当我这样做时,切片不再扩展。

data: [{
                type: "pie",
                animationEnabled: true,
                startAngle: 75,
                toolTipContent: "Select: <b>{label}</b> - {y}% of Total",
                showInLegend: false,
                legendText: "{label}",
                indexLabelFontSize: 16,
                indexLabelFontColor: "white",
                indexLabel: "{label}",
                click: this.props.onSliceSelected,
                dataPoints: sortedData,
                

            }]

我尝试了许多其他事情来确保选择了切片-大多数涉及尝试在数据点上设置exploded = true。

我在任何地方都找不到如何执行此操作的示例。

欣赏任何想法。

编辑-这是一个屏幕截图,我需要更新“选定的任务”(在图表外部和父组件中)。现在,标签将更新,但图表不会扩展!

在此处输入图片说明

维斯瓦斯

要在单击每个切片时更新饼图中的标签,可以dataPoints[index].labelchart-options中进行更新并调用chart.render()这是一个工作正常的StackBlitz

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

AngularJS + CanvasJS:如何进行单元测试?

来自分类Dev

如何在chart.js中显示每个切片的饼图数据值

来自分类Dev

CanvasJS中的动态堆积列

来自分类Dev

动态确定要显示的饼图数量,并使用CanvasJS在单个页面上显示每个饼图

来自分类Dev

如何在CanvasJS中向散点图添加最佳拟合线(趋势线)?

来自分类Dev

图形不与Jinja,Flask和CanvasJS一起显示

来自分类Dev

如何使用jsp和CanvasJS在图形中显示信息?

来自分类Dev

CanvasJS覆盖标题栏

来自分类Dev

单击CanvasJS饼图后重定向到特定页面

来自分类Dev

CanvasJS Chart.js-如何使axisY具有恒定范围?

来自分类Dev

从clojurescript(canvasjs)调用javascript

来自分类Dev

我们可以自定义canvasjs甜甜圈图到其他吗?

来自分类Dev

X轴的CanvasJS力阶

来自分类Dev

AngularJS + CanvasJS:如何进行单元测试?

来自分类Dev

CanvasJS中的不间断空格

来自分类Dev

CanvasJs:直线而不是正则图

来自分类Dev

CanvasJS透明背景

来自分类Dev

如何使用highchart在饼图切片的单击上调用按钮单击事件

来自分类Dev

无论鼠标悬停如何,始终在 CanvasJS 中显示工具提示

来自分类Dev

如何使用 JSON 数据创建 CanvasJS 图表?

来自分类Dev

canvasjs 不在图表中显示条形

来自分类Dev

如何通过从canvasjs中的AJAX调用获取输入来绘制对数刻度的图形

来自分类Dev

canvasjs 范围柱状图在水平轴下方时更改条形颜色和宽度

来自分类Dev

如何通过 DOM-Container 访问 canvasJS 图表

来自分类Dev

如何在 CanvasJS 图表中显示格式化的日期时间?

来自分类Dev

如何使用 Jquery 删除 canvasjs 中的试用版水印(无需许可)

来自分类Dev

CanvasJS 图表无法使用幻灯片/轮播容器正确呈现

来自分类Dev

如何在 canvasjs 图表上隐藏间隔?

来自分类Dev

无法将 CanvasJS 导入 Java 项目,无法解析符号 canvasjs

Related 相关文章

  1. 1

    AngularJS + CanvasJS:如何进行单元测试?

  2. 2

    如何在chart.js中显示每个切片的饼图数据值

  3. 3

    CanvasJS中的动态堆积列

  4. 4

    动态确定要显示的饼图数量,并使用CanvasJS在单个页面上显示每个饼图

  5. 5

    如何在CanvasJS中向散点图添加最佳拟合线(趋势线)?

  6. 6

    图形不与Jinja,Flask和CanvasJS一起显示

  7. 7

    如何使用jsp和CanvasJS在图形中显示信息?

  8. 8

    CanvasJS覆盖标题栏

  9. 9

    单击CanvasJS饼图后重定向到特定页面

  10. 10

    CanvasJS Chart.js-如何使axisY具有恒定范围?

  11. 11

    从clojurescript(canvasjs)调用javascript

  12. 12

    我们可以自定义canvasjs甜甜圈图到其他吗?

  13. 13

    X轴的CanvasJS力阶

  14. 14

    AngularJS + CanvasJS:如何进行单元测试?

  15. 15

    CanvasJS中的不间断空格

  16. 16

    CanvasJs:直线而不是正则图

  17. 17

    CanvasJS透明背景

  18. 18

    如何使用highchart在饼图切片的单击上调用按钮单击事件

  19. 19

    无论鼠标悬停如何,始终在 CanvasJS 中显示工具提示

  20. 20

    如何使用 JSON 数据创建 CanvasJS 图表?

  21. 21

    canvasjs 不在图表中显示条形

  22. 22

    如何通过从canvasjs中的AJAX调用获取输入来绘制对数刻度的图形

  23. 23

    canvasjs 范围柱状图在水平轴下方时更改条形颜色和宽度

  24. 24

    如何通过 DOM-Container 访问 canvasJS 图表

  25. 25

    如何在 CanvasJS 图表中显示格式化的日期时间?

  26. 26

    如何使用 Jquery 删除 canvasjs 中的试用版水印(无需许可)

  27. 27

    CanvasJS 图表无法使用幻灯片/轮播容器正确呈现

  28. 28

    如何在 canvasjs 图表上隐藏间隔?

  29. 29

    无法将 CanvasJS 导入 Java 项目,无法解析符号 canvasjs

热门标签

归档