曲线图 highcharts.js

最新推荐文章于 2018-12-08 16:53:54 发布

weixin_30685029

最新推荐文章于 2018-12-08 16:53:54 发布

阅读量106

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/mbyund/p/5485006.html

本文通过图表形式展示了2014年7月至2015年8月期间，北京地区别墅的成交指数情况，包括每月的成交套数及均价变化趋势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title></title>
    <script type="text/javascript" src="http://s0.ifengimg.com/static/js/jquery-1.7.2.min_c4de8813.js"></script>
    <style>

        @charset "utf-8";
        html, div, h1, h2, h3, h4, p, ul, li, img, dl, dt, dd {
            margin: 0;
            padding: 0;
        }
        img {
            border: 0 none;
        }
        ul {
            list-style: outside none none;
        }
        h1, h2, h3, h4 {
            font-weight: normal;
        }
        i {
            font-style: normal;
        }
        body {
            background: #ccc none repeat scroll 0 0;
            color: #000;
            font: 14px/20px "微软雅黑","宋体";
            text-decoration: none;
        }
        .reportChart {
            position: relative;
            width: 641px;
        }
        .reportNav ul {
            font-size: 0;
            line-height: 0;
            padding-left: 5px;
            word-spacing: -1px;
        }
        .reportNav ul li {
            background: #ededed none repeat scroll 0 0;
            border: 1px solid #e2d3d5;
            color: #7d7d7d;
            cursor: pointer;
            display: inline-block;
            *display:inline;
            *zoom:1;
            font-size: 16px;
            height: 26px;
            line-height: 26px;
            margin-right: 4px;
            text-align: center;
            width: 97px;
        }
        .reportNav ul li.current {
            background-color: #e74543;
            border-color: #e74543;
            color: #fff;
        }
        .reportCon {
            overflow: hidden;
            padding: 0 0 0 4px;
            position: relative;
            width: 641px;
        }
        .reportCon-chart {
            background: #fff none repeat scroll 0 0;
            float: left;
            height: 336px;
            padding-top: 10px;
            width: 641px;
        }

    </style>
</head>

<body>
<!--通用头 start-->
<!--北京 start-->
    <div class="reportChart">
        <div class="reportNav">
            <ul>
                <li class="current">别墅</li>
                <li>高端公寓</li>
            </ul>
        </div>
        <div class="reportCon" cityid="0">
            <div class="reportCon-chart"></div>
        </div>
    </div>
<script type="text/javascript" src="http://s0.ifengimg.com/static/js/highcharts.js"></script>
<script type="text/javascript">
    var gdwy = {
        
        init: function(){
            gdwy.renderReportCon($(".reportCon").eq(0),0);
            gdwy.bind();
        },
        bind: function(){
            //选项卡点击切换
            $(".reportNav").on("click", "li", function(e){
                var tgt = $(e.target);
                var tgtParent = tgt.parent();
                var tgtParentCon = tgtParent.parent().siblings(".reportCon").eq(0);
                var idx = tgt.index();
                tgtParent.find("li").eq(idx).addClass("current").siblings().removeClass("current");
                gdwy.renderReportCon(tgtParentCon,idx);
            });
        },
        renderReportCon: function(target,idx){//渲染图表
            var cityid = target.attr("cityid");
            var data = reportData[cityid].data[idx];
            target.find(".reportCon-chart").highcharts({
                title: {
                    text: data.title,//图表名称
                    margin: 5,
                    style: { "color": "#333333", "fontSize": "18px", "fontFamily": "微软雅黑" }
                },
                credits: {
                    enabled: false // 禁用版权信息
                },
                xAxis: {
                    categories: data.xData//X轴坐标
                },
                yAxis: [{
                    min: 0,
                    title: {
                        text: data.yAverageTitle
                    }
                }, {
                    title: {
                        text: data.yNumberTitle
                    },
                    opposite: true
                }],
                series: [{
                    type: 'column',
                    name: data.yNumberTitle,
                    data: data.yNumberData,
                    color: '#e74543',
                    yAxis: 1
                }, {
                    type: 'spline',
                    name: data.yAverageTitle,
                    data: data.yAverageData,
                    marker: {
                        lineWidth: 2,
                        lineColor: Highcharts.getOptions().colors[3],
                        fillColor: 'white'
                    }
                }]
            });
        }
    };
    $(document).ready(function(){
        gdwy.init();
    });
</script>
<script>
    var reportData = [
        {
            city: "北京",
            data: [
                {
                    type: "所有住宅",
                    title: "所有住宅成交指数(北京)",
                    xData: ['2014.7', '2014.8', '2014.9', '2014.10', '2014.11', '2014.12', '2015.1', '2015.2', '2015.3', '2015.4', '2015.5', '2015.6', '2015.7', '2015.8'],
                    yAverageTitle: "均价(元/平方米)",
                    yAverageData: [70289, 54256, 66686, 60815, 58775, 62922, 94315, 74880 , 61617, 62718, 64327, 67040, 66333, 70592],
                    yNumberTitle: "成交套数(套)",
                    yNumberData: [85, 180, 289, 364, 328, 527, 293, 96, 189, 242, 248, 348, 328, 303]
                },
                {
                    type: "别墅",
                    title: "别墅成交指数(北京)",
                    xData: ['2014.7', '2014.8', '2014.9', '2014.10', '2014.11', '2014.12', '2015.1', '2015.2', '2015.3', '2015.4', '2015.5', '2015.6', '2015.7', '2015.8'],
                    yAverageTitle: "均价(元/平方米)",
                    yAverageData: [34165, 36584, 37897, 32544, 30866, 37888, 29888, 29070, 32811, 35266, 31687, 39901, 33613, 32565],
                    yNumberTitle: "成交套数(套)",
                    yNumberData: [174, 246, 149, 175, 163, 302, 130, 85, 129, 208, 352, 462, 389, 417]
                }
            ]
        }
    ];
</script>
</body>
</html>

参考网站：http://house.ifeng.com/column/report/gdwy201508　　

转载于:https://www.cnblogs.com/mbyund/p/5485006.html