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>

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 = "<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;

        }

    }

}

View Code

 

注意：

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

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

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