Web site front-end _highcharts-data visualization. 0001. Quick start of highcharts configuration?

Brief introduction:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/89/E1/wKiom1ggM1qjd240AABp7cWM0Wk226.png "title=" Clipboard.png "alt=" Wkiom1ggm1qjd240aabp7cwm0wk226.png "/>

Description: Highcharts (4.1.6) is a well-known international graphics plug-in, completely based on JS writing implementation, you can easily build a variety of chart types, including line chart (lines Charts)/area chart (areas Charts)/Column chart (column Charts)/ Bar chart (bar Charts)/pie chart (Pie Charts)/scatter plot (scatter Charts)/Bubble chart (Bubble Charts)/motion diagram (Dynamic Charts)/combo Chart (combinations)/3d diagram (3D Charts)/instrument panel (Gauges charts)/Heat map (heatmaps charts), etc.

Small test Sledgehammer:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M00/89/DE/wKioL1ggM4HylERHAABF_v6uBP4580.png "title=" Clipboard.png "alt=" Wkiol1ggm4hylerhaabf_v6ubp4580.png "/>

<! doctype html>
 
  
 
Note: As on the production of Hangzhou for one week the highest temperature line chart, very simple, highcharts core body is the chart configuration item object, which contains the various types of data and configuration information of the chart, each part can be divided into smaller configuration item objects, as long as the canonical format, Fill in the corresponding data and configuration values can be, of course, according to the traditional JS object-by-value method can also be achieved, but it is recommended that the same way as the unified set

Configuration options:
Description: Highcharts icon configuration options are numerous, the most straightforward way is to open the Highcharts (4.1.6) directory in the API directory highcharts.html,highcharts.setoptions is the global configuration options, Contains global (public configuration) and Lang (localized configuration), $ ("#container"). Highcharts is our common configuration subkey

 
 

  
  
 
   
 
    
Child items
 
    
Description
 
   
 
   
 
    
Chart
 
    
Chart Basic Configuration Items
 
   
 
   
 
    
Colors
 
    
Global color
 
   
 
   
 
    
Credits
 
    
Copyright Information Configuration Items
 
   
 
   
 
    
Data
 
    
Advanced Data Module Configuration items
 
   
 
   
 
    
Drilldown
 
    
Drill Down feature configuration items
 
   
 
   
 
    
Exporting
 
    
Export feature configuration Items
 
   
 
   
 
    
Labels
 
    
Label Configuration Items
 
   
 
   
 
    
Legend
 
    
Legend Configuration Items
 
   
 
   
 
    
Loading
 
    
Loading animation configuration Items
 
   
 
   
 
    
Navigation
 
    
Navigation Configuration Items
 
   
 
   
 
    
NoData
 
    
Unlimited Data Module Configuration items
 
   
 
   
 
    
Pane
 
    
Panel module Configuration Items
 
   
 
   
 
    
Plotoptions
 
    
Plot Area Configuration Items
 
   
 
   
 
    
Series
 
    
Data column Configuration Items
 
   
 
   
 
    
Subtitle
 
    
Subtitle Configuration Items
 
   
 
   
 
    
Title
 
    
Header Configuration Items
 
   
 
   
 
    
ToolTip
 
    
Cue box configuration Items
 
   
 
   
 
    
Xaxis
 
    
X-Axis Configuration items
 
   
 
   
 
    
YAxis
 
    
Y-Axis Configuration items
 
   
 
  
 
 
Description: The attentive people may find There are many configuration options for plotoptions.series subkeys and children other than Plotoptions.series and series subkeys, but the same settings are prioritized, Where the series subkey is set with a priority greater than the subkey setting other than Plotoptions.series, subkeys other than plotoptions.series are set at priority greater than the Plotoptions.series subkey setting. Therefore, especially in a container containing multiple chart types, reasonable use of priority, can effectively reduce the amount of code written, so the general configuration for the chart can be set through the plotoptions.series, For all the same-type chart configurations, the series settings are available for specific chart settings, except for the child settings other than plotoptions.series.

This article is from the "Li-Yun Development Road" blog, please be sure to keep this source http://xmdevops.blog.51cto.com/11144840/1870269
Web site front-end _highcharts-data visualization. 0001. Quick start of highcharts configuration?