问题描述
我使用chart.js画线形图，有几个筛选条件，第一次绘制没有问题，当第二绘制时显示的是正确的线形图，可是当鼠标在线形图上滑动的时候会出现第一次的线形图跟第二次的线形图闪烁，来回切换的情况<div><canvasid="can_LineChart"width="950"height="400"style="margin-top:40px;margin-left:20px;"></canvas></div>
<script>$(function(){$("#lbtSearch").click(function(){varDevice=$("#drp_Device").val();varDeviceType=$("#drp_DeviceType").val();varStartDate=$("input[name='inp_StartDate']").val()varEndDate=$("input[name='inp_EndDate']").val()$.post("../../Ajax/DeviceData_Chart.ashx?r="+Math.random()+"&Device="+Device+"&DeviceType="+DeviceType+"&StartDate="+StartDate+"&EndDate="+EndDate+"",function(data){vardevicetype=newArray();varaddtime=newArray();for(vari=0;i<data.chart.length;i++){devicetype[i]=eval("data.chart[i]."+DeviceType.toUpperCase());addtime[i]=data.chart[i].ADDTIME;}charts(devicetype,addtime);},"json");});});functioncharts(devicetype,addtime){//alert(devicetype);//alert(addtime);varlineChartData={//x轴的标示labels:addtime,//labels:["January","February","March","April","May","June","July"],//数据，数组中的每一个object代表一条线datasets:[{//颜色的使用类似于CSS，你也可以使用RGB、HEX或者HSL//rgba颜色中最后一个值代表透明度//填充颜色fillColor:"rgba(151,187,205,0)",//线的颜色strokeColor:"rgba(151,187,205,1)",//点的填充颜色pointColor:"rgba(151,187,205,1)",//点的边线颜色pointStrokeColor:"#fff",//与x轴标示对应的数据data:devicetype},]}varoptions={//Boolean-Ifweshowthescaleabovethechartdata//网格线是否在数据线的上面scaleOverlay:false,//Boolean-Ifwewanttooverridewithahardcodedscale//是否用硬编码重写y轴网格线scaleOverride:false,//**RequiredifscaleOverrideistrue**//Number-Thenumberofstepsinahardcodedscale//y轴刻度的个数scaleSteps:null,//Number-Thevaluejumpinthehardcodedscale//y轴每个刻度的宽度scaleStepWidth:null,//Number-Thescalestartingvalue//y轴的起始值scaleStartValue:null,//String-Colourofthescaleline//x轴y轴的颜色scaleLineColor:"rgba(0,0,0,1)",//Number-Pixelwidthofthescaleline//x轴y轴的线宽scaleLineWidth:1,//Boolean-Whethertoshowlabelsonthescale//是否显示y轴的标签scaleShowLabels:true,//String-Scalelabelfontdeclarationforthescalelabel//标签的字体scaleFontFamily:"'Arial'",//Number-Scalelabelfontsizeinpixels//标签字体的大小scaleFontSize:12,//String-Scalelabelfontweightstyle//标签字体的样式scaleFontStyle:"normal",//String-Scalelabelfontcolour//标签字体的颜色scaleFontColor:"#666",///Boolean-Whethergridlinesareshownacrossthechart//是否显示网格线scaleShowGridLines:true,//String-Colourofthegridlines//网格线的颜色scaleGridLineColor:"rgba(0,0,0,.1)",//Number-Widthofthegridlines//网格线的线宽scaleGridLineWidth:1,//Boolean-Whetherthelineiscurvedbetweenpoints//是否是曲线bezierCurve:true,//Boolean-Whethertoshowadotforeachpoint//是否显示点pointDot:true,//Number-Radiusofeachpointdotinpixels//点的半径pointDotRadius:3,//Number-Pixelwidthofpointdotstroke//点的线宽pointDotStrokeWidth:1,//Boolean-WhethertoshowastrokefordatasetsdatasetStroke:true,//Number-Pixelwidthofdatasetstroke//数据线的线宽datasetStrokeWidth:3,//Boolean-Whethertofillthedatasetwithacolour//数据线是否填充颜色datasetFill:true,//Boolean-Whethertoanimatethechart//是否有动画效果animation:false,//Number-Numberofanimationsteps//动画的步数animationSteps:60,//String-Animationeasingeffect//动画的效果animationEasing:"easeOutQuart",//Function-Fireswhentheanimationiscomplete//动画完成后调用onAnimationComplete:null}varmyLine=newChart(document.getElementById("can_LineChart").getContext("2d")).Line(lineChartData,options);}</script>
解决方案
解决方案二：
求大神们帮帮忙