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

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

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.