Using Highcharts to create web charts (1), highchartsweb

Using Highcharts to create web charts (1), highchartsweb
In recent projects, we need to summarize and analyze the data to obtain a column chart or a curve chart such as a bulk point chart. After learning and testing, we found that Highchart is good. If you need it in projects, let's take a look at some examples taken from the official website. First, let's talk about the main features of HighCharts: 1. compatibility: HighCharts is written in pure JavaScript and compatible with most browsers today, including Safari, IE, and Firefox. chart type: HighCharts supports chart types, including graphs, area charts, bar charts, pie charts, scatter charts, and comprehensive charts. 3. Language-free: HighCharts can be used in most WEB development scenarios and is free for individual users. It supports ASP, PHP, JAVA,. NET, and other languages. 4. tip: In a chart generated by HighCharts, you can set the display result on the data point, that is, move the cursor to a data point to display the detailed data of the point, and set the display effect. 5. Zoom-in function: HighCharts can display a large amount of data in a centralized manner, and can zoom in a certain part of the chart to increase the accuracy of the chart for detailed display. You can select either horizontal or vertical zoom-in. 6. Timeline: accurate to milliseconds. Ii. Next, let's take a look at the basic components of highcharts.

Generally, Highcharts includesTitle(Title ),Coordinate Axis(Axis ),Data Column(Series ),Data prompt box(Tooltip ),Legend(Legend ),Copyright information(Credits), advanced also includeExport button(Exporting ),Marking line(PlotLines ),Area(PlotBands.

Shows the basic components of Highcharts.

Figure 2-1 basic components of Highcharts

Highcharts mainly consists of Title

The title of the chart, including the title and subTitle. The subTitle is optional.

Axis

Axis, including the X axis and Y axis ). Normally, the X axis is displayed at the bottom of the chart, and the Y axis is displayed on the left of the chart. Multiple Data columns can use the same coordinate axis. To compare or distinguish data, Highcharts provides multi-axis support.

Series

Data column. One or more data series on a chart, such as a curve in a curve and a column in a column chart.

Tooltip

Data prompt box. When you move the cursor over a certain point, the data of the point is displayed in a box, such as the value and data unit of the point. The prompt information in the Data prompt box can be dynamically specified through the Formatting Function.

Legend

Legend. Different data columns are marked with different shapes, colors, and texts. You can click the icon to display or hide the data column.

Credits

Copyright information of the chart. The text that contains links is displayed in the lower-right corner of the chart. The default value is the official website address of Highcharts. This information is not displayed by specifying credits. enabled = false.

Exporting

Export button. You can use exporting. js to export charts as common files.

PlotLines

Marking line (or auxiliary line ). You can add a line to the chart, such as the average line and the maximum value line.

PlotBands

Area (resolution band ). You can add area bands of different colors to the chart to indicate the obvious range areas.