Use of HighCharts

Introduction to HighCharts series software

1. Highcharts

Highcharts is a chart library written in pure JavaScript , which can easily and conveniently add interactive charts to Web sites or Web applications, and is free for personal study, personal websites and non-commercial use. Highcharts supports up to 20 types of charts, such as line charts, curve charts, area charts, bar charts, pie charts, scatter charts, gauge charts, bubble charts, waterfall flow charts, etc. Many of these charts can be integrated in the same A mixed graph is formed in one graph.

2. Highstock

Highstock is a stock chart control written in pure JavaScript , which can develop time axis charts of stock trends or large data volumes. It includes several advanced navigation components: preset data time ranges, date picker, scroll bars, pan, zoom functions.

3. Highmaps

Highmaps is an excellent map component based on HTML5 . Highmaps inherits the simple and easy-to-use features of Highcharts, which can be used to easily and quickly create interactive map charts that are closely related to geographic locations, such as sales, election results, and so on. Highmaps can be used alone or as a component of Highcharts.

HighCharts Advantages

An introduction to some of the advantages of using Highcharts.
  1. First of all, using Highcharts can quickly and simply make various forms of statistical charts or trend charts such as histograms, pie charts, and curve charts. Users only need to provide the corresponding data and simple Highcharts configuration. Simple to use.
  2. Cross-language and cross-platform support for multiple browsers. Highcharts is made based on js. Is a js class library. No matter what backend language you use, you can easily use Highcharts for charts or statistics.
  3. The threshold for use is extremely low, and a little look at the API can make various statistical charts that meet the requirements. Data is flexible. Both xml and json are supported.

HighCharts use

Download plugin

    If you want to use HighCharts, you must first refer to its plug-in. The plug-in is not big, and the core file has only one highcharts.jsfile. You can go to the HighCharts official website to download: http://www.highcharts.com/download After the download is complete, refer to the js file to the project

JavaScript

<!--highcharts核心文件-->
<script type="text/javascript" src=" 
<!--导出需要引用的文件-->
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>

Demo

This article takes the mixed Y-axis line chart as an example

The backend code is as follows:

Java

List<Map<String, String>> list = saleService.getSaleAndBuyer();
StringBuffer dateArray = new StringBuffer();
StringBuffer saleArray = new StringBuffer();
StringBuffer buyerArray = new StringBuffer();
dateArray.append("[");
saleArray.append("[");
buyerArray.append("[");
for (int i=0;i<list.size();i++) {
    dateArray.append(list.get(i).get("date"));
    //数据格式的转换
    saleArray.append(String.valueOf(list.get(i).get("salePrice")));
    buyerArray.append(String.valueOf(list.get(i).get("buyerCount")));
    if (i < list.size()-1) {
        dateArray.append(",");
        saleArray.append(",");
        buyerArray.append(",");
    }
}
dateArray.append("]");
saleArray.append("]");
buyerArray.append("]");
request.setAttribute("dateArray", dateArray);
request.setAttribute("saleArray", saleArray);
request.setAttribute("buyerArray", buyerArray);
logger.warn("登录成功");
return "/stock/success";

The front-end code is as follows:

JavaScript

<script>
    var dateList = "${dateArray}".replace("[", "").replace("]", "").split(",");
    var salePrice = "${saleArray}".replace("[", "").replace("]", "").split(",");
    var buyerCount = "${buyerArray}".replace("[", "").replace("]", "").split(",");
    for (var i = 0; i < buyerCount.length; i++) {
        buyerCount[i] = parseInt(buyerCount[i])
    };
    for (var i = 0; i < salePrice.length; i++) {
        salePrice[i] = parseFloat(salePrice[i])
    };
    var chart = {
        zoomType: 'xy'
    };
    var subtitle = {
        text: '数据来源：www.xxxxxxx.xyz'
    };
    var title = {
        text: '销售数据图'
    };
    var xAxis = {
        categories: dateList,
        crosshair: true
    };
    var yAxis = [{ // 第一条Y轴
        labels: {
            format: '{value}人',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        title: {
            text: '单日客户量',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        }
    }, { // 第二条Y轴
        title: {
            text: '单日销售额',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '￥{value}',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        opposite: true
    }];
    var tooltip = {
        shared: true
    };
    var legend = {
        layout: 'vertical',
        align: 'right',
        x: 0,
        verticalAlign: 'top',
        y: 0,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
    };
    var series = [{
        name: '单日销售额',
        type: 'column',
        yAxis: 1,
        data: salePrice,
        tooltip: {
            valueSuffix: '元'
        }

    }, {
        name: '单日客户量',
        data: buyerCount,
        tooltip: {
            valueSuffix: '人'
        }
    }
    ];
    var json = {};
    json.chart = chart;
    json.title = title;
    json.subtitle = subtitle;
    json.xAxis = xAxis;
    json.yAxis = yAxis;
    json.tooltip = tooltip;
    json.legend = legend;
    json.series = series;
    $('#container').highcharts(json);
</script>

The result is as follows:

Attached:

• Highcharts official website: http://www.highcharts.com

• Highcharts官网Demo：http://www.highcharts.com/demo

• Highcharts official website documentation: http://www.highcharts.com/docs

• Highcharts官网API：http://api.highcharts.com/highcharts