简体繁体 English

动态数据标签 Highcharts CSS

[英]Dynamic datalabels Highcharts CSS

原文 2015-11-03 13:52:00 3 1 javascript/ jquery/ html/ css/ highcharts

I have a Highcharts pie chart with a table and two buttons added to it.我有一个Highcharts饼图，上面有一个表格和两个按钮。 I need the data labels from the chart to appear dynamically around them, instead of hidden beneath as they are currently.我需要图表中的数据标签动态显示在它们周围，而不是像当前那样隐藏在下面。

Is there a way to avoid conflicts with the table overlapping the data labels in Highcharts ?有没有办法避免与Highcharts的数据标签重叠的表格发生冲突？

Is there a way to do this within the CSS or is custom JavaScript required?有没有办法在CSS做到这一点，或者是否需要自定义JavaScript ？

fiddle小提琴

1 个解决方案

I noticed you set your table to z-index: 1 .我注意到您将table设置为z-index: 1 。

Your Highchart is an SVG so it has no concept of z-index .您的Highchart是一个 SVG，因此它没有z-index概念。 The type of ordering in SVG is the painters model, meaning each subsequent element is painted over top of the other. SVG 中的排序类型是画家模型，这意味着每个后续元素都在另一个元素之上绘制。

If you really want a table occupying the same space as the chart, I think unfortunately you would have to have the table as elements in the SVG and put it before the highcharts-data-labels so that these labels float over the table because they will be "painted after/on top" of the table.如果你真的想要一个与图表占据相同空间的表格，我认为不幸的是你必须将表格作为 SVG 中的元素并将其放在highcharts-data-labels之前，以便这些标签漂浮在表格上，因为它们会被“涂在桌子的后面/上面”。