java心电图

来源:互联网 发布:淘宝有名的男装店铺 编辑:程序博客网 时间:2024/04/20 04:39

介绍:

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]            }        }]    });}

四、心电图形展示
这里写图片描述

原创粉丝点击