A list of some of the chart JS interfaces that are open in the Report development tool

1.. Description

Report development Tool Finereport 8.0 version of the open part of the chart JS interface, in the specific application process, many people do not know what the role of these interfaces, how to apply, so according to my own application in the following summarizes the new open JS interface can be implemented by the function and the specific invocation method.

2. Interface Properties

2.1 Get Chart Object

IRA Chart.WebUtils.getChart ("cells__id")	Cell
IRA Chart.WebUtils.getChart ("float__id")	Suspended elements
IRA Chart.WebUtils.getChart ("id")	Form

2.2 Chart Data settings

Chart.datarefresh ()	Re-fetch the data from the dataset and refresh the chart (the refresh effect is consistent with dynamic refresh)
Chart. Settitlevisible (Boolean)	Whether the caption is visible, the parameter is true visible, false is not visible
Chart.settitlecontent ()	The value of the caption is set, which can be a parameter or a value
Chart.setlegendvisible (Boolean)	Whether the legend is visible, the parameter is true visible, false is not visible
Chart.setseriesinvisible ([index])	Set which series hidden, numeric array format, such as: Chart.setseriesinvisible ([0,1,3]) series 1,2,4 hidden; Hidden series legends are also grayed out
Chart.setlabelvisible (Boolean)	Whether the label is visible, the parameter is true visible, false is not visible
Chart.setlabelvalue (class name, series name, tag string value)	The corresponding label display values (column chart, area chart, line chart, bar chart, doughnut chart, radar chart, combo chart, full pitch)
Chart.setlablevalue (string value of series name, tag)	(Pie chart)
Chart.setlablevalue (series name, X, y, label string value)	(Scatter chart, bubble chart)
Chart.setlablevalue (region name, string value of the label)	Map
Chart.setlablevalue (address/latitude/Longitude, label string value)	(GIS map, address or latitude set by template) stock charts, dashboards and Gantt charts do not support label settings
Chart.addalertline (name, value, color, align, isusesecondvalueaxis)	Set the cordon content, value, color and left or right/top or
Chart.clearalertline ()	Clear All Cordon
Chart.setanimationenable (Boolean)	Sets whether the chart turns on animation, true to ON, false off
Chart.setdraggable (Boolean)	Set the chart to turn on drag, true to ON, false off
Chart.setzoom (Boolean)	Sets whether the chart turns on zoom, true turns on, false off
Chart.settooltipenable (Boolean)	Set whether to turn on data point prompt, true to turn on, false to close
Chart.settooltipvalue (category name, Series name, HTML)	Set up data point content for corresponding categories and series (column chart, area chart, line chart, bar chart, doughnut chart, radar chart, combo chart, full pitch)
Chart.settooltipvalue (series name, HTML)	(Pie chart)
Chart.settooltipvalue (series name, x,y,html)	(Scatter chart, bubble chart)
Chart.settooltipvalue (index, region name, HTML)	(map, index level, top 0 descending)
Chart.settooltipvalue (address/latitude and longitude, HTML)	(GIS map, address or latitude set by template)
Chart.settooltipvalue (date,html)	(Stock chart)
Chart.triggertooltip (category name, Series name)	Trigger the corresponding data point hint (column chart, area chart, line chart, bar chart, doughnut chart, radar chart, combo chart, full distance graph)
Chart. Triggertooltip (series name)	(Pie chart)
Chart.triggertooltip (series name, X, y)	(Scatter chart, bubble chart)
Chart.triggertooltip (index, region name)	Map
Chart.triggertooltip (address/latitude and longitude)	(GIS map, address or latitude set by template)
Chart. Triggertooltip (date)	(Stock chart)
Chart.setaxistooltipenable (Boolean)	Set the chart to open the coordinate point prompt, true to turn on, false to close
Chart.setautorefresh (Time)	Set the time for automatic chart refresh
Chart.refresh ()	Chart Refresh, per second
Chart.sort (Boolean)	Sort the chart display by categorical value (column chart includes stacked type, bar chart includes stacked type, area chart includes stacked type, line chart); True indicates small to large, false
Chart.getgis ()	Get Baidu Maps Map Object

Note: Stock charts, dashboards and Gantt charts do not support label settings, Gantt charts and dashboards do not have data point hints.

3. Example

3.1 Preparing data

Create a new workbook, add a dataset, and the SQL statement is SELECT * FROM [sales] where region = ' East China ' .

3.2 Inserting a line chart

for an example of a hover chart, click Insert > Hover elements > Insert Chart , the Chart Wizard dialog box pops up, selecting Line Chart such as:

650) this.width=650; "Style=" border:; "src=" http://img.blog.csdn.net/20151113134827897?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "/>

Click OK

3.3 Setting chart data

The chart data source comes from a dataset dataset, click Chart Property sheet-Data settings are as follows:

650) this.width=650; "Style=" border:; "src=" http://img.blog.csdn.net/20151113134906102?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "/>

and see the name of the chart is FLOAT2, see how to refer to suspended elements

3.4 Adding a Button control and setting the JS event

In the H1 cell, add a button control and set the name of the button to change the value of the marker point, as

650) this.width=650; "Style=" border:; "src=" http://img.blog.csdn.net/20151113134936438?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "/>

Click Event Editing , add the JS event for the button control, the specific JS code is as follows:

1. chart=fr. Chart.WebUtils.getChart (); // get   

2. chart.settooltipvalue ( Sunlin " , " , ); // modify Sunlin, beef jerky marker point hint for modified content 1111;   

Note: This changes the value of the marker point for sunlin and beef jerky.

Fill in the preview, click the button control, the effect is as follows

650) this.width=650; "Style=" border:; "src=" http://img.blog.csdn.net/20151113135041197?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "/>

650) this.width=650; "Style=" border:; "src=" http://img.blog.csdn.net/20151113135108479?watermark/2/text/ Ahr0cdovl2jsb2cuy3nkbi5uzxqv/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70/gravity/center "/>

3.5 Saving and previewing

Save the template, click the Fill Preview, the effect is as above.

This article is from the blog blog, be sure to keep this source http://10541372.blog.51cto.com/10531372/1712498

A list of some of the chart JS interfaces that are open in the Report development tool