前端charts常用小结

图表插件

jquery插件使用举例：

            $("#shieldui-chart1").shieldChart({
            theme: "dark",
            primaryHeader: {
                text: "Overall Throughput"
            },
            exportOptions: {
                image: false,
                print: false
            },
            dataSeries: [{
                seriesType: "area",
                collectionAlias: "tuple / second",
                data: performance
            }]
        });

json数组

var traffic = [ {
                    Source: "dataChunkDir", Amount: 323
                },
                {
                    Source: "metadataDir", Amount: 345
                },
                {
                    Source: "Social", Amount: 567
                },
                {
                    Source: "Search", Amount: 234
                },
                {
                    Source: "Internal", Amount: 111
                }];//定义数组
        var j = {Source: "dataChunkDir", Amount: 323};
        traffic.push(j);//添加对象元素`

JS遍历json对象

var nowStr = {"name":"Rolf", "password":"123"};
    for(var k in nowStr){
    var key = k;//key
    var value = nowStr[k];//value
}

或者

for(var i = 0; i < nowStr.length; i++){ alert(nowStr[i].name + " " +nowStr[i].password);
}

通过JS动态添加table的tr,td

var table = document.getElementById("datatable");
var newRow = table.insertRow(); //创建新行
var newCell1 = newRow.insertCell(0); //创建新单元格
newCell1.innerHTML = "<td>Rolf</td>" ; //单元格内的内容
newCell1.setAttribute("align","center"); //设置位置

var newCell1 = newRow.insertCell(1); //创建新单元格
newCell1.innerHTML =  "<td>123</td>" ; //单元格内的内容
newCell1.setAttribute("align","center"); //设置位置

Ajax获取后台数据

JS端
方法一：

$.ajax({
            type: 'GET',
            url:  "<%=path%>/clientTest",
            data: null ,
            dataType: "json",
            success:function(data) {
//                alert("success");
                var nowStr = data;
            },
            error : function() {
                // view("异常！");
                alert("failed！");
            }
  });

其中，1、
data:{ username:$("#username").val(), content:$("#content").val() }, 这个data是客户端传到服务器端的数据。
2、success:function(data) 这个data是服务器端返回客户端的数据
方法二：

//1. 创建ajax对象
                    var ajax;// createAjax();
                    if (window.XMLHttpRequest)
                    {
                        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                        ajax=new XMLHttpRequest();
                    }
                    else
                    {
                        // IE6, IE5 浏览器执行代码
                        ajax=new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    //alert(ajax!=null?"创建ajax成功！":"创建ajax失败！！");
//2.定义调用函数
function chart() {
                        //3. 准备发送请求
                        /*
                         method表示发送请求的方式，例如GET或POST
                         url表示发送请求的目标地址
                         可选的boolean值
                         >>true：表示该请求是异步的，这是默认值，web2.0
                         >>false：表示该请求是同步的，web1.0
                         */
                        var method = "GET";
                        <%String path = request.getContextPath();%>//获取当前路径
                        var url = "<%=path%>/clientTest";//交互的类
                        ajax.open(method, url, true);
                        //4. 真正发送异步请求
                        /*
                         content表示发送请求的内容，如果无内容的话，使用null表示
                         如果有内容，写成key=value形成，例如：username=jack&password=123
                         */
                        var content = "111";
                        ajax.send(content);
                        //5. ajax对象监听服务器的响应
                        ajax.onreadystatechange = function() {
                            //如果ajax对象，已经完全接收到了响应，

                            if (ajax.readyState == 4) {
                                //如果响应正确
                                
                                    if (ajax.status == 200) {

                                    var nowStr = JSON.parse(ajax.responseText);//转化为json对象

                                    alert(json.name);//输出对象的name属性

                                    或者
                                    //定位span标签

                                    var spanElement = document.getElementsByTagName("span")[0];

                                    //将nowStr放当span标签内

                                   spanElement.innerHTML = nowStr;
                                }
                            }
                        };
                    };

后台
3.发送ajax对象
SystemState systemState = new SystemState();//新建空对象
操作对象

        String jsonStr = json.toString();//转化为json字符串
        System.out.println(json.toString());
        response.getWriter().write(jsonStr);//获取输出流对象
//通过流对象，将信息输出到AJAX对象

js中Double类型数据保留两位小数（非四舍五入）

var a = 3.346234325;
var b = parseFloat(a).toFixed(3);
var result = b.substring(0,b.toString().length - 1);  //这里先将a转换为float类型再保留三位小数，最后截取字符串前b.length - 1位
document.write(result);

Echarts图表使用

smooth:false/true; //折线是否平滑
parallelAxis.type: 坐标轴类型。
可选：
'value' 数值轴，适用于连续数据。
'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
'log' 对数轴。适用于对数数据。
parallelAxis.name: 坐标轴名称。
parallelAxis.nameLocation: 坐标轴名称显示位置。
可选：
'start'
'middle'
'end'
parallelAxis.nameTextStyle: 坐标轴名称的文字样式。
parallelAxis.nameGap: 坐标轴名称与轴线之间的距离。
xAxis.axisLabel.interval:坐标轴刻度标签的显示间隔，在类目轴中有效。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推。
xAxis.axisLabel.showMinLabel:是否显示最小 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最小 tick 的 label）。
修改坐标轴颜色：

axisLine:{
                lineStyle:{
                color:'yellow',
                width:8,//这里是为了突出显示加上的，可以去掉
                }
            }