Highcharts Basic Introduction

Transferred from: http://www.cnblogs.com/jyh317/p/4189773.html

I. Introduction of Highcharts

Highcharts is a simple JavaScript-written library of charts that makes it easy to add interactive diagrams to Web sites or Web applications, and Highcharts currently supports up to 18 different types of graphs, such as line charts, graphs, area charts, histograms, pie charts, scatter plots, and more. , you can meet any needs of the Web diagram!

II. structure of the Highcharts

Third, the noun explanation

English name	Chinese name	Describe
Lang	Language text Object	All Highcharts text-related settings
Chart	Chart	Chart area, graphics area, and common chart configuration options
Colors	Color	Chart data column Color configuration, is a color array
Credits	Copyright information	Highcharts the copyright information and links placed at the bottom right of the chart
Drilldown	Drill Down	Drill down into the data and drill down into the specific data
Exporting	Export module	Export feature configuration, export the chart to download as a picture or print a chart
Labels	Label	HTML tags that can be placed anywhere within the chart area
Legend	Legend	Use different shapes, colors, text, etc. to indicate different data columns, by clicking on the mark to show or hide the data column
Loading	Load in	The load option controls the appearance and text of the loading screen that overrides the drawing area
Navigation	Navigation	Export module buttons and menu configuration option groups
NoData	No data	What to display when there is no data
Pane	Chunking	Configuration for gauges and radar charts, mainly setting radians and background colors
Plotoptions	Data point Configuration	Configurations for different types of charts. Highcharts all chart types see the table below
Series	Data columns	One or more data series on a chart, a curve in the table, a column
Title	Title	Include the title and subtitle, where the subtitle is non-mandatory
ToolTip	Data point Prompt box	When the mouse over a point, the form of a box to prompt pity dorado data, such as the value of the point, data units, etc.
Axis	Axis	Includes the x-axis and y-axis. Several different data columns can share the same x-axis or y-axis, and, of course, can have two X-or Y-axes, which are displayed either up or down the chart, respectively.

Iv. Advantages of Highcharts

Compatibility

Highcharts supports all current modern browsers, including IE6 +, Iphone/ipad, and Android. Highcharts uses SVG technology to render graphics in standard (Web browser) browsers and uses VML technology to draw on legacy IE browsers.

Open Source Free

Free for individual users and non-commercial use, and provide source code download, you can modify it arbitrarily. Commercial use is subject to a license for purchase, for personal and non-commercial use in accordance with the CC BY-NC 3.0 Agreement

Pure JavaScript

Highcharts is completely based on local browser technology and does not require any plugins (such as Flash, Java), does not need to install any server environment or dynamic Language library support, only need two JS files to run.

Rich chart types

Highcharts currently supports straight line graphs, graphs, area charts, curve area charts, area range charts, curve area range charts, histogram, histogram, bar chart, bars, pie, scatter, box line, bubble, error line, funnel, gauge, waterfall, radar, a total of 18 types of charts, Many of these charts can be integrated into the same graph to form a composite diagram.

Dynamic nature

Provides a rich API interface for adding, deleting, and modifying any point, line and text of a chart after creating a chart. Support for numerous JavaScript events, combined with Ajax interfaces provided by JavaScript frameworks such as jquery, MooTools, prototype, can get data from the server in real time and refresh the chart in real time.

Multi-axis Support

Highcharts provides multi-axis support for data that needs to be compared. You can also set their position, text, and style properties for each axis.

Dynamic Prompt Box

When you hover over a data point on a chart, Highcharts displays a message prompt, and of course, the content and style that you display can be specified and set yourself.

Chart Export and print capabilities

You can export highcharts charts to PNG, JPG, PDF, and SVG format files or print them directly on a Web page.

Chart Zoom

You can set the scale of the chart to make it easier to view the chart data.

Support for external Data loading

Highcharts supports a variety of data forms, such as JavaScript arrays, JSON files, JSON objects, and tabular data, which can be local, different pages, or even different Web sites.

Highcharts Basic Introduction