动态渲染多个重复的Highcharts图表

最新推荐文章于 2022-01-19 15:37:37 发布

在路上`

最新推荐文章于 2022-01-19 15:37:37 发布

阅读量776

点赞数

分类专栏： javascript html css

本文链接：https://blog.csdn.net/qq_39490750/article/details/109217748

版权

javascript 同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

css

6 篇文章 1 订阅

订阅专栏

html

2 篇文章 0 订阅

订阅专栏

需求：实现多个动态图表

示例

在这里插入图片描述

准备工作

需要提前引入所需要的css，js等插件文件，可参考Highcharts官网实例

/*
*boardBuildingInCommunityMap为接口返回的数据
*  buildFeeArr[i] = [] 为重要步骤，清空每个图表中重复的数组
*  buildFeeArr[i].push(buildFeeObj) 给每条数据假如不同的动态数据
* buildFee(buildFeeArr, boardBuildingInCommunityMap, feeItemIdStr)根据需要想图表中传入所需的数据， 完成调用
*/
if (boardBuildingInCommunityMap.length > 0) {

for (var i = 0; i < boardBuildingInCommunityMap.length; i++) {
       buildFeeArr[i] = []
       if (boardBuildingInCommunityMap[i].feeItemMap && boardBuildingInCommunityMap[i].feeItemMap.length > 0) {


           for (var j = 0; j < boardBuildingInCommunityMap[i].feeItemMap.length; j++) {

               var buildFeeObj = {}
               buildFeeObj.feeItemId = boardBuildingInCommunityMap[i].feeItemMap[j].feeItemId
               buildFeeObj.amount = Number(boardBuildingInCommunityMap[i].feeItemMap[j].amount)
               buildFeeObj.name = boardBuildingInCommunityMap[i].feeItemMap[j].feeItemName
               buildFeeObj.y = Number(boardBuildingInCommunityMap[i].feeItemMap[j].historyAmount)
               buildFeeObj.z = Number(boardBuildingInCommunityMap[i].feeItemMap[j].currentAmount)
               buildFeeObj.houseNum = boardBuildingInCommunityMap[i].houseNum
               buildFeeObj.boardFee = boardBuildingInCommunityMap[i].boardFee

               buildFeeObj.buildingName = boardBuildingInCommunityMap[i].buildingName
               buildFeeObj.buildingId = boardBuildingInCommunityMap[i].buildingId


               buildFeeArr[i].push(buildFeeObj)
               // console.log("v=============buildFeeArr", buildFeeArr)
           }
       }

   }
}


buildFee(buildFeeArr, boardBuildingInCommunityMap, feeItemIdStr)

图表渲染

/*
* series: [{
  minPointSize: 8,
     innerSize: '20%',
     zMin: 0,
     name: 'countries',
     data: buildFeeArr[i]  直接渲染没个图表对应的数据
 }]
*   $(containerClass).highcharts 实例渲染图表
*/
   function buildFee(buildFeeArr, boardBuildingInCommunityMap, feeItemIdStr) {
        var buildFeeHtml = ""; //图表3 html

        // console.log("buildFeeArr==========", buildFeeArr)

        for (let i = 0; i < boardBuildingInCommunityMap.length; i++) {

            buildFeeHtml = ` <div class="unitOweBox-eveBox">

                    <div class="unitOweBox-eve">
                        <div class="unitOweBox-sum">
                            欠费户数<span class="unitOweBox-houseNum">${boardBuildingInCommunityMap[i].houseNum ? boardBuildingInCommunityMap[i].houseNum : 0}</span>
                            总欠费<span class="unitOweBox-boardFee">${boardBuildingInCommunityMap[i].boardFee ? boardBuildingInCommunityMap[i].boardFee : 0}</span>
                            <span class="detailBuildBtn" data-buildingId="${boardBuildingInCommunityMap[i].buildingId}">详情
                            </span>
                        </div>
                        <div>
                            <div id="buildFeeContainer${i}" style="height:230px;"></div>
                        </div>

                    </div>
                    <div class="unitOweBox-eveUnit">
                        ${boardBuildingInCommunityMap[i].buildingName}
                    </div>
                </div>`
            $(".unitOweBox").append(buildFeeHtml)
            if (boardBuildingInCommunityMap[i].feeItemMap && boardBuildingInCommunityMap[i].feeItemMap.length > 0) {

                var containerClass = '#buildFeeContainer' + i.toString()
                
                $(containerClass).highcharts({
                    credits: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    chart: {
                        type: 'variablepie'
                    },
                    title: {
                        text: ''
                    },
                    tooltip: {
                        headerFormat: '',
                        pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b><br/>' +
                            '历史欠费 <b>{point.y}</b><br/>' +
                            '本期应缴 <b>{point.z}</b><br/>'
                    },
                    series: [{
                        minPointSize: 8,
                        innerSize: '20%',
                        zMin: 0,
                        name: 'countries',
                        data: buildFeeArr[i]
                    }]
                });


            } else {
                $("#buildFeeContainer" + i).html("<div class='unitOweBox-noNum'>暂无数据</div>")

            }
            $(".detailBuildBtn").click(function () {
                $("#detailBuildBox .detailBuildBox-dialog").show()
                let feeItemIdStrArr = feeItemIdStr.split(",")
                let buildingidDetail = $(this).attr("data-buildingId")
                detailBuildBoxClick(feeItemIdStrArr, buildingidDetail)
            });
            $("#detailBuildBox .detailBuildBox-dialog .closeBtn").click(function () {
                $("#detailBuildBox .detailBuildBox-dialog").hide()
            })

        }


    }