步骤：
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") + * * ,
min: setDate(date + " 00:00:00"),
labels: {
// staggerLines: 3,
rotation: -, //字体倾斜
align: 'right',
x: ,
y:
},
lineColor: '#C0D0E0'
},
yAxis: (function () {
var data = [];
var color = ["#DDDF0D", "#7798BF", "#55BF3B"];
for (var i = ; i < dataDevIndexName.length; i++) {
var yaxis = "";
if (i > ) {
yaxis = { title: { text: "" }, lineWidth: , lineColor: color[i], opposite: true };
} else {
yaxis = { title: { text: "" }, lineWidth: , 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: ,
color: 'RED',
dashStyle: 'shortdot',
length: '10px'
}, {
width: ,
color: 'RED',
dashStyle: 'shortdot'
}]
},
//曲线的示例说明，像地图上得图标说明一样
legend: { //【图例】位置样式
layout: 'horizontal', //【图例】显示的样式：水平（horizontal）/垂直（vertical）
// backgroundColor: '#6B6B6B',
// borderColor: '#CCC',
borderWidth: ,
align: 'center',
verticalAlign: 'top',
enabled: true,
x: -,
y: ,
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[], date1Arr[], date1Arr[]);
var date2 = new Date(date2Arr[], date2Arr[], date2Arr[]);
if ((date1.getTime() - date2.getTime()) / / / < ) {
for (var i = ; 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:
});
}
}
},
animation: true, //当一个序列不显示时，是否显示动画
// 是否在图注中显示。
showInLegend: true,
// 调整图像顺序关系
zIndex:
}
}
});
}
/* 动态设置曲线图的series */
function setHighcharts() {
//addPlotLin 添加警戒线 即：一条横杠
if (document.getElementById("ckDim").checked == true) {
var res = PSCP.csLine.QueryDim(GetInt(dataDevIndexID[]));
var rt = res.value.ds.Tables[];
if (rt != null) {
if (rt.Rows.length > ) {
yaxis = { width: , color: 'red', value: GetInt(rt.Rows[].DIMENSIONMAX), id: 'plotline-1' };
}
} else {
alert("查询量纲出错：" + res.value.reason);
return;
}
chart.yAxis[].addPlotLine(yaxis);
}
// 设计思路：将series的name属性和data属性分开就行设置，最后合并
for (var i = ; i < dataDevIndexID.length; i++) {
var sdata = [];
var res = PSCP.csLine.QueryActData(GetInt(dataDevIndexID[i]), document.getElementById("txtDevDate").value);
var rt = res.value.ds.Tables[]; var onOffValue = -; //用于记录开关变量(前一条数据)的值 if (rt != null) {
if (rt.Rows.length > ) {
for (var j = ; j < rt.Rows.length; j++) {
var IsOnOff = GetInt(rt.Rows[j].DEVICECONFIGTYPE); //记录类型 0#指标类型，1#开关变量
if (IsOnOff == ) { //开关变量
if (j == ) {
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或者空，否则会报错