[Summary Time Summary Time] Some common operations of Highcharts

HIghcharts is a very powerful chart drawing plugin, which is based on pure js drawing. Of course, there are a lot of operations on the charts as well. The following is a summary of some of the more common highcharts operations that I encountered in my work, which is not very complete.

 

1) Draw Highcharts graph:

The syntax is actually very "jquery", just $("#divId").highcharts(options); where options is a { } structure that contains various options, which are typical json syntax. This fills a highcharts graphic into the specified div (the id of the div is divId);

 

2) Get various objects of Highcharts:

Get the chart itself, the syntax is also very "jquery" ,  $("#divId").highcharts()

It is very simple to get the series of highcharts, first get the chart, and then chart.series (the same is true for other options - in fact, it is the syntax for getting a certain value of json);

Note that the series of highcharts is an array []. If you want to specify a certain series, you need to add a subscript such as chart.series[0].

 

3) Delete a series: series[n].remove(false); //false means not to redraw the chart;

 

4) Add a point to a series, which is often used in the dynamic refresh of the trend chart - addPoint:

For example, in the syntax of series[0] .addPoint( [x,y]|y, boolean redraw, boolean shift), if the third boolean value Boolean shift is true, it means that after adding a point, the first point will If it is removed, visually the graph moves forward dynamically; if it is false, the first point is still there, and visually the graph is squeezed and "wrinkled". And the second parameter, Boolean redraw, is of course set to true~~~~~

 

5) Set the category of the x-axis:

Very common, often used in bar charts, radar charts, pie charts and other graphics. If the categories of these graphs are dynamically read from the background, this syntax is required.

First you have to find xAxis, note that xAxis is also an array. So first get it like this: var xAixs = chart.xAxis[0] and then xAixs  .setCategories (transTimeCategory, false);//false means not to redraw the chart, the first parameter is often the set of strings passed from the background;

 

6) The Js function returns series, which is often used for points on dynamic refresh, such as:

 

var series = [{
			name:'Total',
			data: transCountList,
			marker: {
				enabled: false
			}
		}];
	return series;

 Among them, the data source is transCountList, which is often a List<Map<String, Object>> collection returned in the background. The key of Map<String, Object> is x or y, Object is time in milliseconds, and y is numeric data.

 

 

7) chart.addSeries - often used for data refresh on the y-axis of bar charts, pie charts, radar charts, etc.

Such as:

 

avgTimeChart.addSeries ({
	color:'green',
	data: transTimeData
}, false);

Among them,  transTimeData is often a collection of numerical data such as List<Double> List<Integer> List<Long>, etc.~~

 

 

8) It is necessary to call chart.redraw() after the setCategories and addSeries operations. The reason why the second parameter of the previous operation is false is to call redraw after the operation is completed. This is often used for The graphics are periodically refreshed.

 

9) By default, highcharts supports a maximum of 999 points of the series displayed. If you want to display more, please use number in series:{turboThreshold: number} to specify the maximum number you want to display.

 

10）series.remove

var series = chart.series;
while(series.length > 0) {  
	series[0].remove(false);//Whether to redraw the charts after removing the series  
}

 It is often used to assign a value to the series of this chart in combination with background dynamics. You need to first delete the series:[] that draws an "empty shelf", and then addSeries yourself. .

 

Btw, you cannot return in the success of ajax. If you want to get the background return value of ajax and use it as the return value of the js function, you can only define another variable to receive the return value, and then return the variable. The reason is that success is a callback part of ajax, and its return value is only a local variable, you cannot return the return value in this callback.

 

============== Not very complete, to be added =============