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

Source: Internet
Author: User
Tags radar

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

New workbook, add DataSet, SQL statement for SELECT * FROM [Sales] where region = ' East '.

3.2 Inserting a line chart

Take the hover chart as an example, click Insert > Hover element > Insert Chart, pop Up the Chart Wizard dialog box, select a line chart such as:

Click OK

3.3 Setting chart data

The chart data source is from the dataset dataset, click the Chart property sheet-data settings are as follows:

and see the chart name is FLOAT2, see the method can refer to the 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

Click on event edit to add the JS event to the button control, the specific JS code is as follows:

1. Chart=fr. Chart.WebUtils.getChart ("Float2");//Get Chart Object

2. Chart.settooltipvalue ("Sunlin", "Beef Jerky", "1111");//modify Sunlin, beef jerky marker points for the 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

3.5 Saving and previewing

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

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.