ASP.NET关于使用chart.js绘制线形图的问题

张干 2015-03-27 10:49:22
我使用chart.js画线形图,有几个筛选条件,第一次绘制没有问题,当第二绘制时显示的是正确的线形图,可是当鼠标在线形图上滑动的时候会出现第一次的线形图跟第二次的线形图闪烁,来回切换的情况
<div>
<canvas id="can_LineChart" width="950" height="400" style="margin-top: 40px; margin-left: 20px;"></canvas>
</div>

<script>
$(function () {
$("#lbtSearch").click(function () {
var Device = $("#drp_Device").val();
var DeviceType = $("#drp_DeviceType").val();
var StartDate = $("input[name='inp_StartDate']").val()
var EndDate = $("input[name='inp_EndDate']").val()
$.post("../../Ajax/DeviceData_Chart.ashx?r=" + Math.random() + "&Device=" + Device + "&DeviceType=" + DeviceType + "&StartDate=" + StartDate + "&EndDate=" + EndDate + "",
function (data) {
var devicetype = new Array();
var addtime = new Array();
for (var i = 0; i < data.chart.length; i++) {
devicetype[i] = eval("data.chart[i]." + DeviceType.toUpperCase());
addtime[i] = data.chart[i].ADDTIME;
}

charts(devicetype, addtime);
}, "json");
});
});

function charts(devicetype, addtime) {
//alert(devicetype);
//alert(addtime);
var lineChartData = {

// 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
},
]

}
var options = {
//Boolean - If we show the scale above the chart data
// 网格线是否在数据线的上面
scaleOverlay: false,

//Boolean - If we want to override with a hard coded scale
// 是否用硬编码重写y轴网格线
scaleOverride: false,

//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
// y轴刻度的个数
scaleSteps: null,
//Number - The value jump in the hard coded scale
// y轴每个刻度的宽度
scaleStepWidth: null,
//Number - The scale starting value
// y轴的起始值
scaleStartValue: null,

//String - Colour of the scale line
// x轴y轴的颜色
scaleLineColor: "rgba(0,0,0,1)",

//Number - Pixel width of the scale line
// x轴y轴的线宽
scaleLineWidth: 1,

//Boolean - Whether to show labels on the scale
// 是否显示y轴的标签
scaleShowLabels: true,


//String - Scale label font declaration for the scale label
// 标签的字体
scaleFontFamily: "'Arial'",

//Number - Scale label font size in pixels
// 标签字体的大小
scaleFontSize: 12,

//String - Scale label font weight style
// 标签字体的样式
scaleFontStyle: "normal",

//String - Scale label font colour
// 标签字体的颜色
scaleFontColor: "#666",

///Boolean - Whether grid lines are shown across the chart
// 是否显示网格线
scaleShowGridLines: true,

//String - Colour of the grid lines
// 网格线的颜色
scaleGridLineColor: "rgba(0,0,0,.1)",

//Number - Width of the grid lines
// 网格线的线宽
scaleGridLineWidth: 1,

//Boolean - Whether the line is curved between points
// 是否是曲线
bezierCurve: true,

//Boolean - Whether to show a dot for each point
// 是否显示点
pointDot: true,

//Number - Radius of each point dot in pixels
// 点的半径
pointDotRadius: 3,

//Number - Pixel width of point dot stroke
// 点的线宽
pointDotStrokeWidth: 1,

//Boolean - Whether to show a stroke for datasets
datasetStroke: true,

//Number - Pixel width of dataset stroke
// 数据线的线宽
datasetStrokeWidth: 3,

//Boolean - Whether to fill the dataset with a colour
// 数据线是否填充颜色
datasetFill: true,

//Boolean - Whether to animate the chart
// 是否有动画效果
animation: false,

//Number - Number of animation steps
// 动画的步数
animationSteps: 60,

//String - Animation easing effect
// 动画的效果
animationEasing: "easeOutQuart",

//Function - Fires when the animation is complete
// 动画完成后调用
onAnimationComplete: null
}
var myLine = new Chart(document.getElementById("can_LineChart").getContext("2d")).Line(lineChartData, options);
}
</script>
...全文
323 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
张干 2015-03-27
  • 打赏
  • 举报
回复
求大神们帮帮忙

4,819

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术 图表区
社区管理员
  • 图表区社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧