H5跨平台开发app之横竖屏导致的图表混乱问题-创新互联

在跨平台开发中，犹豫使用的是非原生开发语言，会导致很多不方便的地方，最近公司做一个统计图表的东西，如果用原生开发的话比较容易控制图表显示时手机屏幕的方向，在跨平台开发中比较麻烦，

如果用户打开了手机屏幕自动旋转，有可能导致图表显示的错误。

解决方案：

    
        
        
        
        
        
            var evt = "onorientationchange" in window ? "orientationchange" : "resize";

            window.addEventListener(evt, function() {
                console.log(evt);
                var width = document.documentElement.clientWidth;
                var height = document.documentElement.clientHeight;
                $print = $('#ichart-render');
                if(width > height) {
                    $print.width(width);
                    $print.height(height);
                    $print.css('top', 0);
                    $print.css('left', 0);
                    $print.css('transform', 'none');
                    $print.css('transform-origin', '50% 50%');
                    //这里取得了图表显示控件后要对其进行设置CSS，否则来回旋转将导致布局错误
                    var x = document.getElementById("ichart-render");
                    x.style.position = "absolute";
                    x.style.top = "20%";
                } else {
                    $print.width(height);
                    $print.height(width);
                    $print.css('top', 0);
                    $print.css('left', 0);
                    $print.css('transform', 'none');
                    $print.css('transform-origin', '50% 50%');
                }

            }, false);
        
        
            var w = document.documentElement.clientWidth;
            var h = document.documentElement.clientHeight;
            var diameter = Math.min(w, h);
            //这里获得了手机屏幕的宽高后，为了旋转手机的时候导致界面不混乱，需要将显
            示的图表设置为宽高最小的正方形（取巧）
            console.log(diameter);
            $(function() {
                var chart = iChart.create({
                    render: "ichart-render",
                    width: w,
                    height: w,
                    background_color: "#fefefe",
                    gradient: false,
                    color_factor: 0.2,
                    border: {
                        color: "BCBCBC",
                        width: 1
                    },
                    align: "center",
                    offsetx: 0,
                    offsety: 0,
                    sub_option: {
                        border: {
                            color: "#BCBCBC",
                            width: 1
                        },
                        label: {
                            fontweight: 500,
                            fontsize: 11,
                            color: "#4572a7",
                            sign: "square",
                            sign_size: 12,
                            border: {
                                color: "#BCBCBC",
                                width: 1
                            },
                            background_color: "#fefefe"
                        }
                    },
                    shadow: true,
                    shadow_color: "#666666",
                    shadow_blur: 2,
                    showpercent: false,
                    column_width: "70%",
                    bar_height: "70%",
                    radius: "90%",
                    title: {
                        text: "利用ichartjs制作漂亮图表",
                        color: "#111111",
                        fontsize: 20,
                        font: "微软雅黑",
                        textAlign: "center",
                        height: 30,
                        offsetx: 0,
                        offsety: 0
                    },
                    subtitle: {
                        text: "",
                        color: "#111111",
                        fontsize: 16,
                        font: "微软雅黑",
                        textAlign: "center",
                        height: 20,
                        offsetx: 0,
                        offsety: 0
                    },
                    footnote: {
                        text: "",
                        color: "#111111",
                        fontsize: 12,
                        font: "微软雅黑",
                        textAlign: "right",
                        height: 20,
                        offsetx: 0,
                        offsety: 0
                    },
                    legend: {
                        enable: false,
                        background_color: "#fefefe",
                        color: "#333333",
                        fontsize: 12,
                        border: {
                            color: "#BCBCBC",
                            width: 1
                        },
                        column: 1,
                        align: "right",
                        valign: "center",
                        offsetx: 0,
                        offsety: 0
                    },
                    coordinate: {
                        width: "80%",
                        height: "84%",
                        background_color: "#ffffff",
                        axis: {
                            color: "#a5acb8",
                            width: [1, "", 1, ""]
                        },
                        grid_color: "#d9d9d9",
                        label: {
                            fontweight: 500,
                            color: "#666666",
                            fontsize: 11
                        }
                    },
                    label: {
                        fontweight: 500,
                        color: "#666666",
                        fontsize: 11
                    },
                    type: "pie2d",
                    data: [{
                        name: "名称A",
                        value: 20,
                        color: "#4572a7"
                    }, {
                        name: "名称B",
                        value: 30,
                        color: "#aa4643"
                    }, {
                        name: "名称C",
                        value: 40,
                        color: "#89a54e"
                    }, {
                        name: "新增",
                        value: 10,
                        color: "#4572a7"
                    }]
                });
                chart.draw();
            });
        
        
            #ichart-render {
                position: absolute;
                top: 20%;
            }