纵有疾风起
人生不言弃

SpringMVC整合Highcharts(基本饼图,条形图,柱状图)

步骤

1、引入highcharts

<script type="text/javascript" src="${context.getContextPath()}/js/highcharts/highcharts.js"></script>
<script type="text/javascript" src="${context.getContextPath()}/js/highcharts/highcharts-more.js"></script>
<script type="text/javascript" src="${context.getContextPath()}/js/highcharts/highcharts-3d.js"></script>

2、 添加条形图标签

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

3、渲染条形图

var chart = Highcharts.chart('container',{
    title: {
        text: 'Solar Employment Growth by Sector, 2010-2016'
    },
    credits: { enabled: false},
    exporting: { enabled: false },
    subtitle: {
        text: 'Source: thesolarfoundation.com'
    },

    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },

    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },

    series: [{
        name: 'Installation'
    }, {
        name: 'Manufacturing'

    }, {
        name: 'Sales & Distribution'

    }, {
        name: 'Project Development'
    }],

    responsive: {
        rules: [{
            condition: {
                maxWidth: 500
            },
            chartOptions: {
                legend: {
                    layout: 'horizontal',
                    align: 'center',
                    verticalAlign: 'bottom'
                }
            }
        }]
    }

});

4、往插入数据

$.ajax({
    type:"GET",
    url:'${rc.getContextPath()}/chart/columeValue',//提供数据的Servlet
    success:function(data){ 
        //迭代,把异步获取的数据放到数组中
        $.each(data,function(i,d){ 
            chart.series[i].setData(d.data);
        });
    },
    error:function(e){ 
        alert(e);
    }
});

完整代码

1、前端

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example</title>
    <style type="text/css"> #container { min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto } .main { float:left;border:1px width:100%; } .left{ float:left;border:1px width:40%; } .right { float:left;border:1px width:40%; } </style>
</head>
<body>
    <table>
        <tr>
            <td>
                <div id="container"></div>
            </td>
            <td>
                <div id="container2" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="container3" ></div>
            </td>
            <td>
                <div id="container4" ></div>
            </td>
        </tr>
    </table>
    <!--引入Highcharts-->
    <script type="text/javascript" src="${context.getContextPath()}/js/highcharts/highcharts.js"></script>
    <script type="text/javascript" src="${context.getContextPath()}/js/highcharts/highcharts-more.js"></script>
    <script type="text/javascript" src="${context.getContextPath()}/js/highcharts/highcharts-3d.js"></script>

    <!--引入jquery-->
    <script type="text/javascript" src="${context.getContextPath()}/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="${context.getContextPath()}/js/jquery.js"></script>


    <script type="text/javascript"> //条形图 var chart = Highcharts.chart('container',{ title: { text: 'Solar Employment Growth by Sector, 2010-2016' }, credits: { enabled: false}, exporting: { enabled: false }, subtitle: { text: 'Source: thesolarfoundation.com' }, yAxis: { title: { text: 'Number of Employees' } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle' }, plotOptions: { series: { label: { connectorAllowed: false }, pointStart: 2010 } }, series: [{ name: 'Installation' }, { name: 'Manufacturing' }, { name: 'Sales & Distribution' }, { name: 'Project Development' }], responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom' } } }] } }); //柱状图 var chart2 = Highcharts.chart('container2', { chart: { type: 'column' }, credits: { enabled: false}, exporting: { enabled: false }, title: { text: '每月降雨量' }, subtitle: { text: 'Source: WorldClimate.com' }, xAxis: { categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ], crosshair: true }, yAxis: { min: 0, title: { text: 'Rainfall (mm)' } }, tooltip: { headerFormat: '<span style="font-size:10px">{point.key}</span><table>', pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', footerFormat: '</table>', shared: true, useHTML: true }, plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } }, series: [{ name: '四川' },{ name: '广西' },{ name: '山东' },{ name: '浙江' }] }); //饼图 var chart3 = Highcharts.chart('container3',{ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, credits: { enabled: false}, exporting: { enabled: false }, title: { text: '浏览器份额' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }, series: [{ name: 'Brands', colorByPoint: true }] }); //饼图 var chart4 = Highcharts.chart('container4',{ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, type: 'pie' }, credits: { enabled: false}, exporting: { enabled: false }, title: { text: '浏览器份额' }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, format: '<b>{point.name}</b>: {point.percentage:.1f} %', style: { color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' } } } }, series: [{ name: 'Brands', colorByPoint: true }] }); $(document).ready(function () {  $.ajax({ type:"GET", url:'${rc.getContextPath()}/demo/pieValue',//提供数据的Servlet success:function(data){  //定义一个数组 var browsers = []; //迭代,把异步获取的数据放到数组中 $.each(data,function(i,d){  browsers.push([d.name,d.value]); }); //var browsers = []; //browsers.push(['AAA',1]); //browsers.push(['业务办理',422]); //browsers.push(['业务咨询',587]); //browsers.push(['其他',115]); //browsers.push(['投诉与建议',350]); //browsers.push(['放款信息',54]); chart3.series[0].setData(browsers); }, error:function(e){  alert(e); } }); $.ajax({ type:"GET", url:'${rc.getContextPath()}/demo/pieValue',//提供数据的Servlet success:function(data){  //定义一个数组 var browsers = []; //迭代,把异步获取的数据放到数组中 $.each(data,function(i,d){  browsers.push(['AAA',555]); }); //设置数据 chart4.series[0].setData(browsers); }, error:function(e){  alert(e); } }); $.ajax({ type:"GET", url:'${rc.getContextPath()}/chart/columeValue',//提供数据的Servlet success:function(data){  //迭代,把异步获取的数据放到数组中 $.each(data,function(i,d){  chart2.series[i].setData(d.data); }); }, error:function(e){  alert(e); } }); $.ajax({ type:"GET", url:'${rc.getContextPath()}/chart/columeValue',//提供数据的Servlet success:function(data){  //迭代,把异步获取的数据放到数组中 $.each(data,function(i,d){  chart.series[i].setData(d.data); }); }, error:function(e){  alert(e); } }); }); </script>
</body>
</html>

2、后端



/** * <p>Project: report</p> * <p>Title: </p> * <p>Description: </p> * * @author liguodong * @version 1.0.0 * @date 2017/12/6 17:22 星期三 */

@Controller
@RequestMapping("/chart")
public class ChartController { 

    private static final Logger LOGGER = LoggerFactory.getLogger(ChartController.class);


    /** * /chart/pieValue * @return */
    @RequestMapping(value = "/pieValue", method = RequestMethod.GET)
    @ResponseBody
    public List<PieVO> pieValue(){
        List<PieVO> resultList = new ArrayList<>();
        resultList.add(new PieVO("Chrome",18.55D));
        resultList.add(new PieVO("Firefoc",19.99D));
        resultList.add(new PieVO("IE",54.13D));
        resultList.add(new PieVO("Oher",0.49D));
        resultList.add(new PieVO("Oprea",1.63D));
        resultList.add(new PieVO("Safari",5.21D));
        return resultList;
    }


    /** * /chart/pieValue * @return */
    @RequestMapping(value = "/columeValue", method = RequestMethod.GET)
    @ResponseBody
    public List<ColumnVO> columeValue(){
        List<Double> doubleList = new ArrayList<>(Arrays.asList(1D,2D,3D,4D,5D,6D,7D,8D,9D,10D,11D,12D));
        List<ColumnVO> resultList = new ArrayList<>();
        resultList.add(new ColumnVO("四川",doubleList.stream().map(x->x+1).collect(Collectors.toList())));
        resultList.add(new ColumnVO("广西",doubleList.stream().map(x->x+5).collect(Collectors.toList())));
        resultList.add(new ColumnVO("山东",doubleList.stream().map(x->x+4).collect(Collectors.toList())));
        resultList.add(new ColumnVO("浙江",doubleList.stream().map(x->x+7).collect(Collectors.toList())));
        return resultList;
    }

}

3、效果图

SpringMVC整合Highcharts(基本饼图,条形图,柱状图)插图

参考

Highcharts中更新series的5种方法
Highcharts API

原文链接:https://blog.csdn.net/scgaliguodong123_/article/details/78866474

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

未经允许不得转载:起风网 » SpringMVC整合Highcharts(基本饼图,条形图,柱状图)
分享到: 生成海报

评论 抢沙发

评论前必须登录!

立即登录