java心电图

---

介绍：

Highcharts 是纯JavaScript编写的一个图表库，Highstock 完全基于 HTML5 技术，不需要再客户端安装任何插件，如 Flash 或 Java。此外你也不用配置任何服务端环境，不需要 PHP、Tomcat、ASP.NET 等，只需要两个 JS 文件即可运行。

一、首先先导入highstock.js包，前提导入jquery的包

<script src="<c:url value="/resource/statics/public/js/highstock/highstock.js"/>"></script>

二、定义一个div，

<div id="xindianChart" style="min-width:700px;height:400px">

三、使用highstock画图

function draw(content){
    var chartData = newConvertXindian(content);
    xindianShow(chartData);
}

function newConvertXindian(dataJson){
    var convertJson = {};

    convertJson.ecgData = new Array();

    $(dataJson).each(function(i, data){

        convertJson.createTime = data.createTime;
        /*convertJson.ecgData = data.ecgValues;*/
        $(data.ecgValues).each(function(i, value){

            convertJson.ecgData[i] =  parseInt(value);
            console.info(convertJson.ecgData[i]);
        });
    });

    return convertJson;
}
/**
 * 新版心电
 * @param chartData
 */

function xindianShow(chartData){

    var maxValue = 500;
    var minValue = -500;
    var height = 300;
    var cellHeight = (maxValue - minValue) / height * 10;


    Highcharts.stockChart('xindianChart', {
        rangeSelector: {
            enabled: false
        },
        title: {
            text: '心电趋势图'
        },

        subtitle: {
            text: "测量时间: " + chartData.createTime
        },
        scrollbar: {
            enabled: true
        },
         xAxis: {
                type: '',
                // minRange : 5000, // 最小放大比例 1S
                //                min: startdt,
                tickPixelInterval: 500, // 网格间隔宽度默认100
                tickLength: 0, // 刻度线的长度
                minTickInterval: 1000,
                tickInterval: 200, // 每大格0.2S
                gridLineWidth: 1, // 网格线的宽度
                gridLineColor: '#ff6a6a', //网格线的颜色 #ed7b10
                minorGridLineColor: '#eda8b7', //次级网格线的颜色 b0a091
                minorGridLineWidth: 1, //次级网格线的宽度
                minorGridLineDashStyle: "shortdot", //次级网格线是点线
                minorTickInterval: 40, //次级网格的间距 0.04S
                //设置区域带 表示删除 或异常
                plotBands: [],
                labels: {
                    enabled: true, //是否显示x轴
                    step: 5,
                    align: 'left',
                    format: '{value:%H:%M:%S}'
                },
            },
            yAxis:{
                min: minValue,
                max: maxValue,
                tickInterval: cellHeight * 5, // 每大格0.5 毫伏 500
                gridLineWidth: 1,
                gridLineColor: '#ff6a6a', // #ed7b10
                minorGridLineWidth: 1, // 次级网格线的宽度 0.8
                minorGridLineColor: '#eda8b7', // 次级网格线的颜色 b0a091
                minorTickInterval: cellHeight, // 次级网格的间隔 0.1毫伏 100
                minorGridLineDashStyle: "shortdot", //次级网格线是点线
                labels: {
                    enabled: false
                }
            },
         plotOptions: {
                series: {
                    marker: {
                        enabled: false
                    }
                }
            },
        credits:{ 
            enabled: false //不显示右下角链接
        },
        exporting:{ 
            enabled: false //不显示右上角导出
        },
        tooltip: {  
            enabled: false  
        },

        series: [{
            name: '心电',
            color: '#000000',
            zones: [], 
            enabled: true,
            data: chartData.ecgData,
            lineWidth:1,
            zIndex: 1,
            marker: {
                fillColor: 'white',
                lineWidth: 1,
                lineColor: Highcharts.getOptions().colors[0]
            }
        }]

    });

}

四、心电图形展示