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