图标插件相关

来源：互联网发布：python改变turtle颜色编辑：程序博客网时间：2024/06/16 15:03

一、使用了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);}

阅读全文

0 0