16 前端显示

16 前端显示

16.1 库与车轮子

在多数的情况下我们都没有理由也没有必要去重新发明我们的车轮,在这时使用库会是一个比较好的做法。

16.2 库

16.2.1 jQuery Mobile

jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。

16.3 网站前台显示

16.3.1 Highcharts

Highcharts有以下的特点

  • 兼容性:兼容当今所有的浏览器,包括 iPhone、IE 和火狐等等;
  • 对个人用户完全免费;
  • 纯JS,无BS;
  • 支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图;
  • 跨语言:不管是 PHP、Asp.net 还是 Java 都可以使用,它只需要三个文件:一个是Highcharts 的核心文件 highcharts.js,还有 a canvas emulator for IE 和 Jquery类库或者 MooTools 类库;
  • 提示功能:鼠标移动到图表的某一点上有提示信息;
  • 放大功能:选中图表部分放大,近距离观察图表;
  • 易用性:无需要特殊的开发技能,只需要设置一下选项就可以制作适合自己的图表;
  • 时间轴:可以精确到毫秒;

在这里只需将需要处理的数据存储到数组中,便可以将其渲染成为图形,下面的温度走势图便是基于Highcharts的结果:

图像说明文字

var dataLength = [];

function drawTemp() {
    var zero = [];
    $.getJSON('/athome/', function(json) {
        var items = [];
        dataLength.push(json.length);
        $.each(json, function(key, val) {
            zero.push(val.temperature);
        });
        chart = new Highcharts.Chart({
            color: {
                linearGradient: {
                    x1: 0,
                    x2: 0,
                    y1: 0,
                    y1: 1
                },
                stops: [
                    [0, '#003399'],
                    [1, '#3366AA']
                ]
            },
            chart: {
                renderTo: 'Tchart',
                type: 'spline'
            },
            title: {
                text: '本月温度情况'
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                categories: [],
                title: {
                    text: ''
                }
            },
            yAxis: {
                title: {
                    text: '温度 (°C)'
                }
            },
            tooltip: {
                backgroundColor: '#FCFFC5',
                borderColor: 'black',
                borderRadius: 10,
                borderWidth: 1,
                enabled: true,
                formatter: function() {
                    return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y + '°C';
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: false
                }
            },
            series: [{
                name: '本月',
                data: zero
            }, {
                name: '对比',
                data: [26.0]
            }]
        });
    });
};

function showTemper() {
    var length = dataLength[0];
    $.ajax({
        url: '/athome/' + length,
        type: 'GET',
        dataType: 'json',
        async: true,
        timeout: 1000,
        error: function() {},
        success: function(sdata) {
            $('.temperStatus').empty();
            $('.temperStatus').append(sdata.temperature);
        }
    });
};

$(document).ready(function() {
    setInterval("drawTemp();", 5000);
    setInterval("showTemper();", 800);
    drawTemp();
    showTemper();
});