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