Making Web Diagram learning with highcharts (i)

Foreword: The recent project needs to summarize and analyze the data to get a histogram or graph such as the bulk point chart, after learning and testing found Highchart good, if you need in the project, may wish to look at some examples from the official website Let's talk first. Highcharts's main features include: 1. Compatibility: Highcharts is written in pure JavaScript, compatible with most of today's browsers, including Safari, IE and Firefox, and more ; 2. Chart type: Highcharts supports chart types, including graphs, area charts, histograms, pie charts, scatter plots, and integrated charts to meet a variety of needs. 3. Not subject to language: Highcharts can be used in most web development and is free for individual users and supports Asp,php,java. NET and many more languages. 4. Hint function: Highcharts generated chart, you can set the display of the effect on the data point, the mouse will be moved to a data point, you can display detailed data of the point, and can be set to display the effect. 5. Amplification function: Highcharts can be displayed in a large number of datasets, and can enlarge a certain part of the graph, the accuracy of the chart will be increased, detailed display, you can choose to scale horizontally or vertically. 6. Timeline: Can be accurate to milliseconds. Second, the next understanding of the basic composition of highcharts

Typically, the highcharts contains the title (title), axis , data column (Series), Data Tip box (tooltip), legend (Legend), Copyright Information (Credits), etc., advanced also includes the Export function button (exporting), marking line (plotlines), marking area (Plotbands) and so on.

Highcharts the basic components as shown in

Figure 2-1 Highcharts Basic components

Highcharts Main composition Title

The chart title, which contains the title and subtitle (SubTitle), where the subtitle is non-mandatory.

Axis

Axis, which contains the x-axis (Xaxis) and y-axis (YAxis). Typically, the x-axis appears at the bottom of the chart, and the y-axis appears on the left side of the chart. Multiple data columns can work together on the same axis, and Highcharts provides multi-axis support for comparing or differentiating data.

Series

Data columns. One or more data series on a chart, such as a curve in a graph, a bar in a bar chart.

Tooltip

Data Tip box. When the mouse hovers over a point, the data of the point is prompted as a box, such as the value of the point, the data unit, and so on. The information prompted in the Data tip box can be specified dynamically through the Format function.

Legend

Legend. Use different shapes, colors, text, etc. to indicate different data columns, and click on the markers to show or hide the data column.

Credits

Chart copyright information. The text containing the link appears at the bottom right of the chart, and the default is the Highcharts official address. This information is not displayed by specifying Credits.enabled=false.

Exporting

Export Features button. By introducing Exporting.js, you can add charts to common file functions.

Plotlines

Marking line (or auxiliary line). You can add an indicator line to the chart, such as the mean line, the highest value line, and so on.

Plotbands

Marking area (Zone of discrimination). You can add areas of different colors to the chart to indicate a distinct range.

Making Web Diagram learning with highcharts (i)