【仅供内部供应商使用,不提供对外解答和培训】
【仅供内部供应商使用,不提供对外解答和培训】
10.0工程请移步:基于finekit
FineReport除了内置的图表、新特性图表插件外,还提供了第三方图表开发的API,方便进行个性化、第三方的图表开发。但是第三方图表API接口过于复杂,用户很难快速的实现并使用自己想使用的第三方新图表。
在原有的图表接口基础之上,对接口进行了简化和修改,让用户可以快速的写出第三方图表插件并使用。
下面介绍下重要的接口,和简单的实现(使用公共的数据配置面板,自定义数据面板参考页面底部链接demo):
上述接口您不必实现,只需要继承实现了该接口的抽象类:AbstractIndependentChartsProvider
类即可,并实现里面具体的方法,示例如下:
此接口您不必实现 ,只需要继承实现了该接口的抽象类:AbstractIndependentChartsUI类即可,并实现相应方法,示例如下:
注意:如果您想使用自己的数据配置面板,需要覆写getTableDataSourcePane(Plot plot, ChartDataPane parent)和getReportDataSourcePane(Plot plot, ChartDataPane parent)方法,并自定义数据编辑面板、chartData、Definition等类,具体参考底部链接中的plugins-demoChart插件。
您的图表配置面板ChartConfig类需要继承此抽象类,并实现相应方法,示例如下:
注意:在toJSON中您如果需要获取数据配置中的数据,请使用getChartData()方法获取chartData对象,并将其转化为您需要的格式,具体参考demo
XML关键配置
<extra-core> <JavaScriptFileHandler class="com.fr.plugins.democharts.common.web.EChartsFileLoader"/> </extra-core> <extra-chart> <IndependentChartProvider class="com.fr.plugins.democharts.pie.DemoChartsPie" plotID="DemoChartsPiePlot"/> </extra-chart> <extra-chart-designer> <IndependentChartUIProvider class="com.fr.plugins.democharts.pie.DemoChartsPieUI" plotID="DemoChartsPiePlot"/> </extra-chart-designer>
您可以自定义图表数据配置面板,更加灵活。(左:默认数据配置面板,右:自定义的数据配置面板)
您需要自定义图表属性配置面板,让它为您设置图表的各种属性:
通过配置面板配置好数据和属性后,您可以预览您图表配置好之后的效果,demo展示效果如下:(左:默认数据配置面板demo,右:自定义数据配置面板demo)
demo工程:
1 Comment
标准公民
“注意:如果您想使用自己的数据配置面板,需要覆写getTableDataSourcePane(Plot plot, ChartDataPane parent)和getReportDataSourcePane(Plot plot, ChartDataPane parent)方法,并自定义数据编辑面板、chartData、Definition等类,具体参考底部链接中的plugins-demoChart插件。”
这个“具体参考底部链接中的plugins-demoChart插件。”在哪里呢?