Use and configuration of highcharts

Keywords: Highcharts Javascript html5 network

Highcharts series software includes Highcharts JS, Highstock JS and Highmaps JS, which are HTML5 chart libraries written in pure JavaScript. All the source codes are open, and can be used and edited for personal and non-commercial purposes. Chinese network address

Highchartsa: the basic chart mainly includes more than 20 kinds of charts, such as line chart, curve chart, area chart, histogram, pie chart, scattered point chart, instrument chart, bubble chart, waterfall flow chart, etc.

Highstock: the stock chart control contains several advanced navigation components (preset data time range, date selector, scroll bar, pan and zoom functions)

High maps: the excellent map component can be used to create interactive map charts that show sales, election results and other geographical relationships.

Highchartsa uses:
Download official resource package or import CDN file directly
CDN is introduced as follows

<script src=""></script>

Create container and specify size for subsequent operations

<div id="container" style="width:400px;height:400px"></div>

The chart is created by the highcharts.chart function. The highcharts.chart function has two parameters: the first is the id of the container, and the second is the chart configuration information.
The code is as follows

<!DOCTYPE html>
<script src="highcharts.js"></script>
<script src="JQuery.js"></script>
<div id="container" style="width:400px;height:400px"></div>

<script type="text/javascript">
// Chart configuration
var options={
    //Remove the generated chart watermark link
     credits: { enabled: false },
        type:"bar"  //Specifies the type of chart. The default is line
     title: {
                text: 'My first chart'                 // Title
            xAxis: {
                categories: ['Apple', 'Banana', 'orange']   // x axis classification
            yAxis: {
                title: {
                    text: 'Number of fruits to eat'                // y axis title
            series: [{                              // Data column
                name: 'Xiao Ming',                        // Data column name
                data: [1, 0, 4]                     // data
            }, {
                name: 'Xiaohong',
                data: [5, 7, 3]
var chart=Highcharts.chart("container",options);

Highstock and Highmaps

Posted by rlelek on Fri, 03 Apr 2020 02:28:57 -0700