我正在绘制一系列效率(百分比)随时间变化的图表。
我对图例有具体要求:
- 单击图例项会将系列保留在图表上,但会淡化线条、标记和图例项,使其显示为“非活动”状态
- 单击"非活动“图例项可撤消淡入淡出,因此线、标记和图例项显示为”活动“
- 为每个图例项添加复选框-取消选中和选中复选框的效果与单击关联图例项的效果相同
- 按类别标题对系列进行分组(在“结晶硅电池”中)-单击此标题或其相关复选框可使整个系列组“活动”或“不活动”
所有这一切都在一个fiddle -https://jsfiddle.net/slaws/0wjpcaqt/138/中进行,它使用styledMode和一个自定义图例,并动态设置图表和自定义图例元素的不透明度:
$('.highcharts-legend-item.highcharts-series-' + value).css('opacity', new_opacity);
$('.highcharts-series.highcharts-series-' + value).css('opacity', new_opacity);
$('.highcharts-markers.highcharts-series-' + value).css('opacity', new_opacity);
然而,我正在努力解决另一个关键要求,即将图表的当前状态导出到图像或PDF,所有系列都以其当前的“活动”或“非活动”状态导出。因此,如果系列褪色,则应将其导出为褪色图像或PDF。
以下截图可供说明:
- This is the display of chart in the browser with the Multichrystalline series inactive
- This is how that chart is exported to PNG-我希望Multichcrystaline系列导出后的外观与浏览器中的外观相同,其线条、标记和图例项变淡,使其显示为“非活动”
您对如何导出当前样式有效的图表有什么建议吗?
PS小提琴中的图例可能会在开始时错位,但重新运行它可以纠正这一点。
1条答案
按热度按时间sqxo8psd1#
您不应该使用CSS来实现它,而应该进行一个系列更新,以在图表配置中保留这些更改。
看看这个方法:https://jsfiddle.net/BlackLabel/b4n0z5k8/
API:https://api.highcharts.com/class-reference/Highcharts.Series#update