Implementation of jquery highcharts painting plug-in partial Amplification

Implementation of jquery highcharts painting plug-in partial Amplification

Highcharts Official Website: http://www.highcharts.com

Highcharts official site example: http://www.highcharts.com/demo/

Highcharts documentation: http://www.highcharts.com/documentation/how-to-use

Highcharts official reference manual: http://www.highcharts.com/ref/#credits--enabled

 

When using highcharts to draw a picture, there may be too many x axes, and the Y axis value may differ too much. At this time, the partial amplification function of highcharts should be used:

Let's take a look at it first:

 

 

In the figure, select an area on the source image, then release the mouse, and the image is changed:

 

 

In the upper-right corner of the page, Click Reset zoom to restore the original size of the image column.

 

The specific implementation is relatively simple:

VaR chart;
$ (Document). Ready (function (){
Chart = new highcharts. Chart ({
Chart :{
Renderto: 'Container ',
Zoomtype: 'xy' // ****** is the key to local amplification ******
},
Title :{
Text: 'highcharts local zoom-In instance'
},
Subtitle :{
Text: 'source: cnblogs.com'
},
Xaxis :[{
Categories: ['Jan ', 'feb', 'mar', 'apr', 'may', 'jun ',
'Jul', 'aug', 'sept', 'oct', 'nov', 'dec ']
}],
Yaxis: [{// y axis
Labels :{
Formatter: function (){
Return this. Value + â ° C ';
},
Style :{
Color: '# 89a54e'
}
},
Title :{
Text: 'temperature ',
Style :{
Color: '# 89a54e'
}
},
Opposite: True

}, {// Secondary yaxis
Gridlinewidth: 0,
Title :{
Text: 'rainfall ',
Style :{
Color: '#4572a7'
}
},
Labels :{
Formatter: function (){
Return this. Value + 'mm ';
},
Style :{
Color: '#4572a7'
}
}

}, {// Tertiary yaxis
Gridlinewidth: 0,
Title :{
Text: 'sea-Level Pressure ',
Style :{
Color: '# aa4643'
}
},
Labels :{
Formatter: function (){
Return this. Value + 'mb ';
},
Style :{
Color: '# aa4643'
}
},
Opposite: True
}],
Tooltip :{
Formatter: function (){
VaR unit = {
'Rainfall': 'mm ',
'Temperature ': â ° C ',
'Sea-Level Pressure ': 'mb'
} [This. Series. Name];

Return ''+
This. x + ':' + this. Y + ''+ unit;
}
},
Legend :{
Layout: 'signature ',
Align: 'left ',
X: 120,
Verticalalign: 'top ',
Y: 80,
Floating: True,
Backgroundcolor: '# ffff'
},
Series: [{// legend data
Name: 'rainfall ',
Color: '#4572a7 ',
Type: 'column ',
Yaxis: 1,
Data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6]

},{
Name: 'sea-Level Pressure ',
Type: 'spline ',
Color: '# aa4643 ',
Yaxis: 2,
Data: [1016,101 6, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2],
Marker :{
Enabled: false
},
Dashstyle: 'EMPTY dot'

},{
Name: 'temperature ',
Color: '# 89a54e ',
Type: 'spline ',
Data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9]
}]
});
});

 

 

This article describes how to process the code in the actual development process,

If you need help, please contact MSN: zheng331773812@hotmail.com QQ: 331773812

Welcome to join us!