highcharts的使用

步骤：

1. 去highcharts官网下载最新版本

2. 在.aspx页面添加引用

例：

"../JS/highcharts/css/highslide.css" rel="stylesheet" type="text/css" />

    
    <%--自己写的样式--%>
    <%--导出--%>
    
    

View Code

 

 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 = "" + OperatorName + "";
                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 '' + this.series.name + '
' +
                                '监测时间：' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '
' +
                                '监 测 值：' + 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) + '
 ',
                                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 = "
";
                                        strHTML += "";
                                        strHTML += "";
                                        strHTML += "";
                                        strHTML += "";
                                        strHTML += "";
                                        strHTML += "";
                                        strHTML += "
监测时间：
" + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', e.point.x) + "
原始监测值：
" + e.point.y + "
新的监测值：
备注：
";
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;
}
}
}

View Code

 

注意：

　　1. y轴的值必须是数字（这里使用的是parseFloat）

　　2. x轴的值必须是数字（从一个日期到1970年1月1日的毫秒数）

　　3. 在曲线图上添加横向时，值不能为null或者空，否则会报错