4,819
社区成员
发帖
与我相关
我的任务
分享<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>