Highcharts（二）基础柱状图 ajax动态刷新

最新推荐文章于 2022-10-11 11:26:42 发布

EGWriket

最新推荐文章于 2022-10-11 11:26:42 发布

阅读量1.1k

点赞数

分类专栏： Highcharts 文章标签： ajax highcharts

本文链接：https://blog.csdn.net/egwriket/article/details/78642314

版权

Highcharts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、背景

显示不同区域的不同项目类型的完成数量

二、项目结构及引用

Highcharts文件
jquery文件（jquery.min.js）
这里写图片描述

三、内容

html

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>

        <style type="text/css">

        </style>
    </head>
    <body>
    <div id="containerColumn" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

    <script src="js/jquery.min.js"></script>

    <!--Highcharts处理图形-->
    <script src="Highcharts-6.0.2/code/highcharts.js"></script>
    <!--Highcharts处理图形 柱状图-->
    <script src="Highcharts-6.0.2/code/modules/exporting.js"></script>
    <!--自己写的-->
    <script src="js/column.js" charset="utf-8"></script>

    </body>
</html>


var urlDataTable='http://localhost:8080/SpringWind/dataMonitor/listData';//数据请求接口

var dataColumnSeries;
var dataColumnCategories;

var chartColumn;

//初始化柱状图
initChartColumn();
//请求数据-柱
ajaxRequest();

//初始化柱状图
function initChartColumn(){
    // 创建空数据柱状图
    chartColumn = {
        chart: {
            renderTo: 'containerColumn', //DIV容器ID
            type: 'column'//报表类型
        },
        //报表名称
        title:{
            //text:'项目进度'
            text:'项目完成数量'
        },
        //补充说明
        //subtitle: {
        //    text: '项目完成数量'
        //},
        yAxis: {
            min: 0,
            title: {
                text: '单位(项)'
            }
        },
        credits:{
            enabled:false//隐藏公司链接
        },
        exporting:{
            enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
        },
        tooltip: {//弹出框
            headerFormat: '<span style="font-size:10px">{point.key}<table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y} 项</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        //x轴显示内容
        xAxis: {
            categories: [ ]
        },
        //数据来源(多个对比的)
        series: [],

    };


}

function ajaxRequest() {
    var qyId = $("#qyId").val();
    //alert(qyId);
    $.ajax({
        url : urlDataTable,
        type : "POST",
        dataType : "jsonp",
        jsonp:"callback",
        jsonpCallback:"successCallback2",
        data : {
            qyId : qyId,
        },
        contentType:'application/x-www-form-urlencoded',
        async : false,
        timeout : 6000,
        success : function(data) {
            if(data.success){

                //构建柱状图数据并渲染
                dataColumnSeries=jQuery.parseJSON(data.data.series);
                dataColumnCategories=data.data.categories;
                buildColumn(dataColumnCategories,dataColumnSeries);
            }else{
                alert("数据异常");
            }
        },
        error : function(error) {
            alert("访问失败");
        }
    });
}

//构建柱状图数据并渲染
function buildColumn(dataColumnCategories,dataColumnSeries){
    //对报表X轴显示名称赋值
    chartColumn.xAxis.categories=dataColumnCategories;
    //赋值 series
    chartColumn.series = dataColumnSeries;
    //绘制图表
    chartColumn = new Highcharts.Chart(chartColumn);

}

json结构

这里写图片描述

{"series": [
  {
    "data": [
      "2",
      "0",
      "1",
      "3"
    ],
    "name": "清洁先行"
  },
  {
    "data": [
      "1",
      "0",
      "0",
      "1"
    ],
    "name": "清水治污"
  },
  {
    "data": [
      "1",
      "0",
      "1",
      "2"
    ],
    "name": "绿满家园"
  },
  {
    "data": [
      "1",
      "0",
      "0",
      "1"
    ],
    "name": "基础设施"
  }
]}

Java数据
注意：假如使用Java，在设置实体类时需要把series对应的类型数据的类型设为int型数组，如果是String类型highcharts会识别不了,而且命名必须为name、data；
用Integer.parseInt()把从数据库取出的String类型数据转换为int数据。

package com.baomidou.springwind.entity;


/**
 * 监测  柱状图数据  
 * highcharts  column-basic数据填充要求
 * @author EGWri
 *
 */
public class DataColumn {

    private String name;//series对应的类型名
    private int[] data; //series对应的类型数据
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int[] getData() {
        return data;
    }
    public void setData(int[] data) {
        this.data = data;
    }

}