类型不同，柱状图自动刷新

最新推荐文章于 2021-11-16 10:26:21 发布

农场主

最新推荐文章于 2021-11-16 10:26:21 发布

阅读量145

点赞数

分类专栏： javaweb程序设计

本文链接：https://blog.csdn.net/qq_39091546/article/details/111288105

版权

本文介绍如何在数据更新时自动刷新不同类型的柱状图，包括直方图、堆积柱状图等，确保图表实时展示最新数据。通过使用JavaScript库如D3.js或ECharts，结合Ajax获取实时数据，实现动态更新图表。

摘要由CSDN通过智能技术生成

<div class="data-column" height="66%" style="background-color: #0d2840;width: 100%;height: 100%;border-radius: 10px;border: 1px #0174f5 solid;padding: 1px;box-sizing: border-box;">
            <div style="width: 100%;height: 100%;box-sizing: border-box;border:2px solid #016ae0;border-radius: 10px;">
                <div class="data-title" style="height: 10%;" th:style="'background-image:url(' +@{/css/console/images/monitor/second_title.png} + ');background-size:100% 60%;height:10%;background-repeat: no-repeat;margin:0 28%;'">
                    <i class="fa fa-server" aria-hidden="true" style="padding-left: 13%;padding-top:3%;font-size: medium">&nbsp;各乡镇减排概览</i>
                </div>
                <div class="box9-1 data-content" style="margin-top: 7%">
                    <div class="order panel">
                        <div class="inner">
                            <!-- 筛选 -->
                            <div class="filter" id="filter">
                                <a href="javascript:;" data-key="electric" class="active">用电情况</a>
                                <a href="javascript:;" data-key="voc" style="border-right: 0.0rem solid #0d2840">总排放量</a>
                                <a href="j