SpringMVC整合Highcharts（基本餅圖，條形圖，柱狀圖）

時間 2021-08-15

標籤 javascript css html 前端 java jquery ajax 後端 api 數組欄目 Spring 简体版

原文原文鏈接

步驟

一、引入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>

二、添加條形圖標籤

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

三、渲染條形圖

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'
                }
            }
        }]
    }

});

四、往插入數據

$.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);
    }
});

完整代碼

一、前端

<!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>

二、後端

/** * <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;
    }

}