Highcharts: Very beautiful charts with various examples ~, Highcharts chart

Highcharts: Very beautiful charts with various examples ~, Highcharts chart
Original article: Highcharts: Very beautiful charts with examples ~

Source code: http://www.zuidaima.com/share/1550463408622592.htm

Compatibility: compatible with all browsers today, including iPhone, IE, and Firefox. Free for individual users. Pure JS, no BS. Supports most chart types: line chart, A graph, a region graph, a region graph, a column graph, a pie chart, or a scatter graph can be used across languages: PHP, Asp.net, or Java. It only requires three files: one is Highcharts's core file. js, as well as a canvas emulator for IE and Jquery class libraries or MooTools class libraries; tip function: move the mouse to a certain point of the chart with prompt information; zoom in: select the chart to zoom in, close observation of charts; ease of use: no special development skills are required. You only need to set the options to create a chart that suits you. Timeline: accurate to milliseconds ;.....

How can I change the position of a dynamic chart made by Jquery and Highcharts when I click a chart?

You can directly implement it using jquery.
First, set the id for the div that stores the three statistical graphs.
When you click an id, you can change the html of the id and the html of the target id. (try this first. It is possible that the statistical table will not work after the operation, switch to clone and then swap)

Or you can modify the css to control it. Set the big layer position: relative outside the three statistical tables; the layers of the three statistical tables are position: absolute; Set left and top to fix the positions of the three. Bind the click Event and modify the css of the corresponding div. This method should be more efficient.

Hope to help you.

A highcharts instance project, the entry level is good

Mark, the company will return to you tomorrow morning

Var gd_ranking_ctn_1 = {'shanwei ': 100, 'heyuan': 80, 'jiangmen ': 70, 'yangjiang': 60, 'jieyang': 50, 'shaoguan ': 40, 'chaozhou ': 99, 'dongguan': 90, 'zhaoqing ': 41, 'meizhou': 20, 'zhongshan ': 60, 'huizhou': 60, 'jieyang 1': 50, 'shaoguan 1': 40, 'chaozhou 1': 18, 'dongguan 1': 70, 'zhaoqing 1': 41, 'meizhou 1 ': 20, 'zhongshan 1': 20, 'huizhou 1': 80 };
Var gd_ranking_ctn_1_name = [], gd_ranking_ctn_1_value = [];
For (var key in gd_ranking_ctn_1 ){
Gd_ranking_ctn_1_name.push (key );
Gd_ranking_ctn_1_value.push (gd_ranking_ctn_1 [key]);
}
RenderToHighchartsFunc ('gd _ ranking_ctn_1 ', gd_ranking_ctn_1_name, gd_ranking_ctn_1_value );

Function renderToHighchartsFunc (id, ticks, ticksValue ){
New Highcharts. Chart ({
Chart :{
RenderTo: id,
Type: 'column'
},
Title :{
Text :''
},
Colors :[
'# E16d70' // bar color
],
XAxis :{
LineWidth: 1,
TickLength: 18,
Labels :{
// Rotation: 30, // X axis text direction
Style :{
Color: '# 3e576f ',
FontSize: 12,
FontFamily: '"Trebuchet MS", Arial, Helvetica, sans-serif'
}
},
Categories: ticks
},
YAxis :{
Min: 0,
Max: 100,
TickInterval: 10,
Title :{
... The remaining full text>