highcharts的使用
步骤：
1. 去highcharts官网下载最新版本
2. 在.aspx页面添加引用
例：
<link href="../JS/highcharts/css/highslide.css" rel="stylesheet" type="text/css" /> <script src="../JS/highcharts/js/jquery-1.5.2.min.js" type="text/javascript"></script> <script src="../JS/highcharts/js/highcharts.js" type="text/javascript" charset="GB2312"></script> <script src="../JS/highcharts/js/theme/MyGray.js" type="text/javascript"></script><%--自己写的样式--%> <script src="../JS/highcharts/js/exporting.js" type="text/javascript" charset="GB2312"></script><%--导出--%> <script src="../JS/highcharts/js/highslide-full.min.js" type="text/javascript"></script> <script src="../JS/highcharts/js/highslide.config.js" type="text/javascript"></script>
3. js文件中代码
/* 曲线图 */ var chart; //曲线图变量 function LoadData() { var date = document.getElementById("txtDevDate").value; chart = new Highcharts.Chart({ chart: { renderTo: 'container', //放置图表的容器 // plotBackgroundColor: null, // plotBorderWidth: null, defaultSeriesType: 'line', zoomType: 'xy' //****** 这句是实现局部放大的关键处 ****** }, title: { //设置标题 text: (function () { var strHTML = "<span style=\"font-size:18px; font-weight: bolder;\">" + OperatorName + "</span>"; return strHTML; })(), style: { color: 'black' } }, xAxis: { type: 'datetime', max: setDate(date + " 00:00:01") + 3600 * 24 * 1000, min: setDate(date + " 00:00:00"), labels: { // staggerLines: 3, rotation: -45, //字体倾斜 align: 'right', x: 10, y: 10 }, lineColor: '#C0D0E0' }, yAxis: (function () { var data = []; var color = ["#DDDF0D", "#7798BF", "#55BF3B"]; for (var i = 0; i < dataDevIndexName.length; i++) { var yaxis = ""; if (i > 0) { yaxis = { title: { text: "" }, lineWidth: 2, lineColor: color[i], opposite: true }; } else { yaxis = { title: { text: "" }, lineWidth: 2, lineColor: color[i] }; } data.push(yaxis); } return data; })(), //鼠标放在某个点上时的提示信息 //dateFormat,numberFormat是highCharts的工具类 tooltip: { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + '监测时间：' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + '监 测 值：' + this.y; }, style: { //提示框字体样式 color: '#ffffff', fontSize: '9px', padding: '5px' }, crosshairs: [{ //交叉点显示的两条纵线（如果只设置一个，只显示纵线） width: 1, color: 'RED', dashStyle: 'shortdot', length: '10px' }, { width: 1, color: 'RED', dashStyle: 'shortdot' }] }, //曲线的示例说明，像地图上得图标说明一样 legend: { //【图例】位置样式 layout: 'horizontal', //【图例】显示的样式：水平（horizontal）/垂直（vertical） // backgroundColor: '#6B6B6B', // borderColor: '#CCC', borderWidth: 0, align: 'center', verticalAlign: 'top', enabled: true, x: -10, y: 25, shadow: true, // useHTML: true, itemHoverStyle: { color: '#921AFF' }, itemStyle: { color: '#6C6C6C' } }, //把曲线图导出成图片等格式 exporting: { enabled: true }, plotOptions: { //用来设置曲线的显示 line: { marker: { enabled: false }, dataLabels: { //是否在曲线上显示数据 enabled: false // color: 'red' }, cursor: 'pointer', enableMouseTracking: true, //是否显示title // 允许线性图上的数据点进行点击 allowPointSelect: true, // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。 point: { events: { click: function (e) { hs.htmlExpand(null, { pageOrigin: { x: this.pageX, y: this.pageY }, headingText: this.series.name, // maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + '<br/> ', maincontentText: (function () { var date1Arr = nowDate.split('-'); var date2Arr = date.split('-'); var date1 = new Date(date1Arr[0], date1Arr[1], date1Arr[2]); var date2 = new Date(date2Arr[0], date2Arr[1], date2Arr[2]); if ((date1.getTime() - date2.getTime()) / 24 / 3600 / 1000 < 7) { for (var i = 0; i <= div_num; i++) { var div = document.getElementById("divUpdate" + i); if (div != null) { div.innerHTML = ""; } } div_num++; var strHTML = "<div id='divUpdate" + div_num + "'>"; strHTML += "<table>"; strHTML += "<tr><td>监测时间：</td><td>" + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', e.point.x) + "</td></tr>"; strHTML += "<tr><td>原始监测值：</td><td>" + e.point.y + "</td></tr>"; strHTML += "<tr><td>新的监测值：</td><td><input type='text' id='newIndexValue' style='width:130px;' /></td></tr>"; strHTML += "<tr><td>备注：</td><td><textarea id='newIndexContent' style='width:180px; height:60px;' ></textarea></td></tr>"; strHTML += "<tr><td colspan='2' style='text-align:center;'><input type='button' value='保存' onclick='ActDataIns(" + e.point.id + ",2)' /></td></tr>"; strHTML += "</table></div>"; return strHTML; } else { return "超出一周不能修改！"; } })(), width: 280 }); } } }, animation: true, //当一个序列不显示时，是否显示动画 // 是否在图注中显示。 showInLegend: true, // 调整图像顺序关系 zIndex: 3 } } }); } /* 动态设置曲线图的series */ function setHighcharts() { //addPlotLin 添加警戒线 即：一条横杠 if (document.getElementById("ckDim").checked == true) { var res = PSCP.csLine.QueryDim(GetInt(dataDevIndexID[0])); var rt = res.value.ds.Tables[0]; if (rt != null) { if (rt.Rows.length > 0) { yaxis = { width: 2, color: 'red', value: GetInt(rt.Rows[0].DIMENSIONMAX), id: 'plotline-1' }; } } else { alert("查询量纲出错：" + res.value.reason); return; } chart.yAxis[0].addPlotLine(yaxis); } // 设计思路：将series的name属性和data属性分开就行设置，最后合并 for (var i = 0; i < dataDevIndexID.length; i++) { var sdata = []; var res = PSCP.csLine.QueryActData(GetInt(dataDevIndexID[i]), document.getElementById("txtDevDate").value); var rt = res.value.ds.Tables[0]; var onOffValue = -1; //用于记录开关变量(前一条数据)的值 if (rt != null) { if (rt.Rows.length > 0) { for (var j = 0; j < rt.Rows.length; j++) { var IsOnOff = GetInt(rt.Rows[j].DEVICECONFIGTYPE); //记录类型 0#指标类型，1#开关变量 if (IsOnOff == 1) { //开关变量 if (j == 0) { onOffValue = GetInt(rt.Rows[j].INDEXVALUE); //第一条数据值赋给onOffValue } else { if (onOffValue != rt.Rows[j].INDEXVALUE) { sdata.push({ x: rt.Rows[j].DT_MONITOR, y: onOffValue, id: rt.Rows[j].ACTUALDATAID }); onOffValue = rt.Rows[j].INDEXVALUE; } } sdata.push({ x: rt.Rows[j].DT_MONITOR, y: onOffValue, id: rt.Rows[j].ACTUALDATAID }); } else { //指标类型 sdata.push({ x: rt.Rows[j].DT_MONITOR, y: rt.Rows[j].INDEXVALUE, id: rt.Rows[j].ACTUALDATAID }); } } var seriesdata = { name: dataDevIndexName[i], data: sdata, yAxis: i }; chart.addSeries(seriesdata); } else { alert(dataDevIndexName[i] + "： 未找到任何符合条件的数据！"); } } else { alert("查询实测表出错：" + res.value.reason); return; } } }
注意：
1. y轴的值必须是数字（这里使用的是parseFloat）
2. x轴的值必须是数字（从一个日期到1970年1月1日的毫秒数）
3. 在曲线图上添加横向时，值不能为null或者空，否则会报错
