图标插件相关

一、使用了Chart.js画折线图，但它自带的响应式调节宽高调节不方便。关闭响应式调节，后采用获取

父元素宽高的方法，动态改变它的宽高。但在窗口变化后，出现了鼠标移入，渲染断层的现象，找不到

原因。。。。。

2017.9.9看到有人是由于第二次绘制时，鼠标移入事件没有被取消所致，有事件再试一下{加入代码
myLineChart.destroy();
    myLineChart =myNewChart.Line(data,options);
    在第二次绘制之前，调用destroy会注销之前的mousemove事件，就能消除闪烁，
}

painLineChart();
window.onresize = function(){

    painLineChart();
};
function painLineChart() {
    var $withd=parseInt($(".linechart").css("width"));
    //获取父级的宽度
    console.log($withd);
    document.getElementById("reportForms").width=$withd-50;
    document.getElementById("reportForms").height=220;
    var ctx=$("#reportForms")[0].getContext("2d");
    const MONTHS=["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];
    var data=[1200,1000,1300,1100,1300,1400,1500,1600,1400,1300,1500,1600];

    var reportLineChart = new Chart(ctx, {
        type: 'line',
        label:{
            display:false
        },
        data: {
            labels:MONTHS,
            datasets:[{
                backgroundColor:"#fc129d",
                data:data,
                label:"报表统计"
            }]
        },
        options: {
            label:{
                display:false
            },
            title:{
                display:false
            },
            responsive: false,
        }
    });
}

2.使用morris.js做折线图，要先引入raphael.min.js,改变不了提示框下行字体的颜色。。。。

css-----------

.morris-hover{
  position:absolute;
  z-index:1000;
  background: #666666;
  color: #fff;
  text-align: center;
  opacity: 0.9;
}
js--------------

line = Morris.Area({
    element: 'reportForms',
    data: [
        {
            period: '2000',
            received: 4691
        },
        {
            period: '2001',
            received: 8403
        },
        {
            period: '2002',
            received: 15574
        },
        {
            period: '2003',
            received: 18211
        },
        {
            period: '2004',
            received: 19427
        },
        {
            period: '2005',
            received: 16486
        },
        {
            period: '2006',
            received: 14737
        },
        {
            period: '2007',
            received: 5838
        },
        {
            period: '2008',
            received: 5542
        },
        {
            period: '2009',
            received: 15560
        },
        {
            period: '2010',
            received: 18940
        },
        {
            period: '2011',
            received: 11970
        },
        {
            period: '2012',
            received: 17580
        },
        {
            period: '2013',
            received: 17511
        },
        {
            period: '2014',
            received: 12601
        },
        {
            period: '2015',
            received: 13158
        }
    ],
    xkey: 'period',
    ykeys: ['received'],
    labels: ['received'],
    hideHover: 'auto',
    fillOpacity: 0.9,
    pointSize: 1.5,
    lineColors: ['#fc129d'],
    resize: true,
    lineWidth: '1',
    xLabels:'year',
    yLabelFormat:function(y){
        return parseInt(y)+'元';
    }
});

function redrawLine () {
    setTimeout(function(){
        line.redraw();
    }, 100);
}