Highcharts的使用

引入

1	<script src="http://code.highcharts.com/highcharts.js"></script>

HTML代码

1	<div id="container"></div>

JavaScript代码

$(document).ready(function () {
	var chart = new Highcharts.Chart({
		chart: {
			renderTo: "container",
			type: 'column',
			events: {
				load: function (event) {
					$.post("/blog/highlight", function (result) {
						var rows = result.rows;
						var xArr = new Array();
						var yArr = new Array();
						for (var i = 0; i < rows.length; i++) {
							xArr.push(rows[i].name);
							yArr.push(rows[i].num);
						}
						chart.xAxis[0].categories = xArr;
						chart.series[0].setData(yArr);

					}, "json");
				}
			}
		},
		//标题
		title: {
			text: '剩余水果数量'
		},
		//X轴的意义
		xAxis: {
			title: '水果类型',
		},
		//Y轴的意义
		yAxis: {
			title: {
				text: '数量'
			}
		},
		//数据列的意义
		series: [{
			name: '数量',
		}]
	});
});

Java代码

Fruit实体类

package com.ledao.entity;

/**
 * @author LeDao
 * @company
 * @create 2021-06-08 21:28
 */
public class Fruit {

    /**
     * id
     */
    private Integer id;

    /**
     * 名称
     */
    private String name;

    /**
     * 数量
     */
    private Integer num;

    public Fruit() {
    }

    public Fruit(String name, Integer num) {
        this.name = name;
        this.num = num;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getNum() {
        return num;
    }

    public void setNum(Integer num) {
        this.num = num;
    }
}

从后台获取数据

@ResponseBody
@RequestMapping("/highlight")
public Map highlight() {
	Map resultMap = new HashMap<>(16);
	List<Fruit> fruitList = new ArrayList<>();
	fruitList.add(new Fruit("苹果",8));
	fruitList.add(new Fruit("香蕉",2));
	fruitList.add(new Fruit("梨",16));
	fruitList.add(new Fruit("油桃",7));
	fruitList.add(new Fruit("西瓜",13));
	fruitList.add(new Fruit("橘子",5));
	resultMap.put("rows", fruitList);
	return resultMap;
}