Bootstrap柱状图示例源码(jchart)

基本信息

源码名称：Bootstrap柱状图示例源码(jchart)

源码大小：0.04M

文件格式：.zip

开发语言：js

更新时间：2019-04-04

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

源码介绍

<!doctype html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bootstrap柱状图插件</title>
        <link rel="stylesheet" href="http://libs.useso.com/js/bootstrap/3.2.0/css/bootstrap.min.css">

        <link rel="stylesheet" href="css/main.css">
        <!--[if IE]>
                <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <article class="sucaihuo-container">
            <div class="container">
                <p>鼠标移动上去可看到对应值</p>
                <hr>
                <div id="population_chart" data-sort="false" data-width="800" class="jChart chart-lg" name="素材火日ip访问统计">
                    <div class="define-chart-row" data-color="#84d6ff" title="网页特效">500000</div>
                    <div class="define-chart-row" data-color="#38BCFF" title="网站模板">217500</div>
                    <div class="define-chart-row" data-color="#00A9FF" title="网站源码">119000</div>
                    <div class="define-chart-row" data-color="#008DD3" title="PHP">78000</div>
                    <div class="define-chart-row" data-color="#0074AA" title="在线工具">466000</div>
                    <div class="define-chart-row" data-color="#005882" title="精选网址">326000</div>

                    <div class="define-chart-footer">100000</div>
                    <div class="define-chart-footer">200000</div>
                    <div class="define-chart-footer">300000</div>
                    <div class="define-chart-footer">400000</div>
                    <div class="define-chart-footer">500000</div>
                </div>



                <div id="colors_chart" data-sort="true" data-x_label="% of Total Love of Pies" data-width="300" class="chart-sm" name="访问地区">
                    <div class="define-chart-row" data-color="#ffb600" title="江苏">13</div>
                    <div class="define-chart-row" data-color="#966510" title="广东">24</div>
                    <div class="define-chart-row" data-color="#cc0000" title="山东">17</div>
                    <div class="define-chart-row" data-color="#59e000" title="山西">26</div>
                    <div class="define-chart-row" data-color="#990077" title="浙江">12</div>
                    <div class="define-chart-row" data-color="#603000" title="海外">8</div>

                    <div class="define-chart-footer">10</div>
                    <div class="define-chart-footer">20</div>
                    <div class="define-chart-footer">30</div>
                </div>
            </div>
        </article>

        <script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
        <script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
        <script src="http://libs.useso.com/js/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script src="js/jchart.js"></script>
        <script>
            $(document).ready(function() {
                $("#population_chart").jChart({x_label: "统计图标题"});
                $("#colors_chart").jChart();
            });
        </script>
    <script type="text/javascript" src="http://shouce.ren/static/ad/gg.js"></script></body>
</html>