Highcharts basic configuration and use Highcharts to make phone-side icons

Three reasons to use Highcharts:
1 "Mobile phone fitting
2 "Big Data support
3 Advantages of SVG
Disadvantages:
No open source, less learning materials

The official has basic general usage, generally is based on the jquery writes the example, also may oneself encapsulates the function, uses the original nature to adjust, the performance simple test, did not find the two have any big difference.

Heightcharts.js is the frame of some simple chart js, but to do dynamic real-time data graph
<script src= "Js/jquery-1.7.2.js" ></script>
<script src= "Js/highstock.js" ></script>

Here are some of the parameters of the previous work requirements, I do explain, because there are too many parameters, do not explain each.
Highcharts.setoptions ({
Global: {//due to the dynamic data of the timeline, the time format needs to be determined, UTC is the international time format, Higharts is international by default, GMT is required in China, so this need to turn to false.
Useutc:false
}
});//Get current time

Chart configuration

$ (' #container '). Highcharts ({//jquery selects the box and adds a chart to the box, which is the basic notation. Chart: {//all the configuration parameters are written in the chat JSON. Events: {//handle some events, have click Mouseover,load and so on, set their different effects, and use functions to express the events you want. Loadfunction () {                //Set the icon per second with the new                varSeries = This. series[0]; SetInterval (function () {                    varI=0; varx = parseint ((NewDate ()). GetTime ()),//Current Timey = Math.Abs ((math.random ()-0.5)) *20;//each point has two values X and Y. Series.addpoint ([x, Y],true,false);//This is the key to dynamically increasing the data, actually increasing the area inside the object series. Addpoint is a method that needs to be re-rendered with the update},3000);},}, BackgroundColor:' #fff ',//Chart Background ColorPinchtype: ",//lets you swipe on the mobile sideZoomtype: "//Click to zoom inside to put y x xy}, colors: [' #434348 ', ' #90ed7d ', ' #f7a35c ', ' #8085e9 ', ' #f15c80 ', ' #e4d354 ', ' #8085e8 ', ' #8d4653 ', ' #91e8e1 '],//color array, according to different areas automatically put different colors, generally in the candle chart and pie chart effect is obviousCredits: {//Website LogoEnabled:false//copyright Fals will no longer display the Highcharts logo. }, navigator: {//Bottom Navigation contentEnabled:false//here, if true, the navigation will appear, you can set the following effect, let its function appear, you can drag zoom mutation resolution}, ScrollBar: {enabled:false//Slide Button}, Rangeselector: {enabled:false}, Xaxis: {//x-Axis settingsDatetimelabelformats: {//format the timeline to show the time effect you want. Second: ' D1 '? ' %m-%d ': '%h:%m:%s ', minute:' D1 '? ' %m-%d ': '%h:%m ', hour:' D1 '? ' %m-%d ': '%h:%m ', Day:' D1 '? ' %m-%d ': '%h:%m ', week:' D1 '? ' %m-%d ': '%h:%m ', Month:' D1 '? ' %m-%d ': '%h:%m '}, Top:20,//x-Axis positionLineColor: ' #90ed7d ',//the color of the axisLinewidth:1,//the width of the axisType: ' DateTime ',//declare that this is the timelineTickwidth:1,//scale width on axisTickcolor: ' #8085e9 ',//scale Colorminrange:360000,//The minimum difference, which is calculated as a timestampTickinterval:36e5,//displays the position of the scale, that is, how many extents show aTicklength:10,//length of the lineLabels: {//Displays the content's settings, color, or font size. style: {color:' #000 ', FontSize:' 8px '}}, plotlines: [{//marker line settings. value:0, Width:1, Color:' #808080 '}]}, YAxis: {//The y-axis setting is actually not much different from the x-axis, just look at what you want. Top:20, opposite:true, Minortickinterval:"Auto", LineColor:' #8085e9 ', LineWidth:0, Tickwidth:0, Ticklength:0, Tickcolor:' #8085e9 ', Title: {text:‘‘}, Labels: {style: {color:' #000 ', FontSize:' 8px '}}, plotlines: [{//this piece needs to focus on, the indicator line needs to set a certain style, you can set the display position, line, weight, length, font, and text label. value:0, Color:' Green ', DashStyle:' Longdashdotdot ', Width:2, Label: {usehtml:true, Text:' <strong> order Price: ' +0+ ' </strong> ', align:"Left"}}]}, Plotoptions: {//here is more important, this is your chart two times explain the change of place, inside can according to different list style to highlight the embodimentArea: {//Description of Area chartFillColor: {//area color gradient. LinearGradient: {x1:0, y1:0, x2:0, y2:1}, stops: [[0, ' #808080 '],                    [1, Highcharts.color (' #808080 '). SetOpacity (0). Get (' Rgba ']] }, LineWidth:1, Marker: {enabled:false}, Shadow:false, states: {hover: {linewidth:1}}, Threshold:NULL}, Candlestick: {linecolor:' Black '}, BoxPlot: {fillcolor:' #505053 '}}, Series: [{//the location of the data display,Type: ' M1 '? ' Area ': ' Candlestick ', Name:' Ha '    }    ]});

The above is the dynamic increase in the chart inside the data, if you want to use Ajax or WebSocket dynamically add data, you can also write
$ (function () {
Containerpain ();//The above function is encapsulated  here to invoke. But the series is a global variable and requires a var.
SetInterval (function () {///write Ajax or WebSocket here.
var x = (new Date ()). GetTime (),//Current time
y = 44+ (rnd (0.5,0.6));
Series.addpoint ("x, Y");
}, 1000);
});

Highcharts basic configuration and use Highcharts to make phone-side icons