highchart 曲线图

$(function() { Highcharts.setOptions({ global: { useUTC: false } }); var chart = new Highcharts.Chart({ chart: { renderTo: 'container', //图表放置的容器，DIV defaultSeriesType: 'spline', //图表类型为曲线图
            events: { load: function() {  } } }, title: { text: '网络接收流量'  //图表标题
        }, xAxis: { //设置X轴 type: 'datetime',  //X轴为日期时间类型 tickPixelInterval: 150  //X轴标签间隔
        }, yAxis: { //设置Y轴
            title:{text: '网络接收流量'}, max: 102400, //Y轴最大值 min: 0,  //Y轴最小值
            labels: {formatter: function() {return this.value/1000 +'KB';
                }}}, tooltip: {//当鼠标悬置数据点时的提示框 formatter: function() { //格式化提示信息 // return '网络流量'+ // Highcharts.dateFormat('%H:%M:%S', this.x) +''+  // Highcharts.numberFormat(this.y, 2)+'%';
            } }, legend: { enabled: false  //设置图例不可见
        }, exporting: { enabled: false  //设置导出按钮不可用
        }, credits: { text: '', //设置LOGO区文字 url: '' //设置LOGO链接地址
        }, series: [{ data: (function() { //设置默认数据， var data = [], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i++) { data.push({ x: 1410213036000,  y: 1250}); } return data; })() }] });
});

<!doctype html>
<html lang="en">
<head><script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script><script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script><script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script><script>//左侧Javascript代码</script>
</head>
<body><div id="container" style="min-width:700px;height:400px"></div>
</body>
</html>

转载于:https://www.cnblogs.com/heidsoft/p/3963579.html

highchart 曲线图相关推荐

利用highchart实现动态饼状图
利用highchart实现动态饼状图引言 highchart 动态饼状图直接上代码代码说明效果图引言一直习惯于用highchart.js完成数据可视化页面的制作,做了很多图表都没有真正的整 ...
highchart的draggable-points.js依赖实现图表的动态拖拽操作
highchart的draggable-points.js依赖实现图表的动态拖拽操作需求实现总结需求实现一个曲线图,能够通过鼠标去拖拽点,来进行修改图表实现例子基于vue来实现,如果是j ...
Ubuntu环境下使用gnuplot由数据表绘制曲线图
在ubuntu中安装NS-3之后,编译DASH仿真器Simulation,在由自适应算法得到仿真结果后可以直接导出数据表,包含仿真时间.每次跳转的视频切片的BitRate等等,这时候可以在Linux环 ...
u-charts 曲线图中间有部分没数据，导致点和点无法连成线的问题解决
解决曲线图或者折线图在两端中间没有数据时无法绘画成线的问题源码修改, 解决方案: 在数据之间填充假数据,并且创建一个和点的数据同级的 list 来验证是不是假数据,如果是假数据就不绘制点,是真数据才绘 ...
曲线图实现，可滚动曲线图，自定义数据
实现可以拖动的曲线图,自定义X轴数据的缩进,自定义X轴显示多少格. 效果图数据格式,数据说明代码可见曲线图实现 u-charts.js 可以在官网下载 <template><vi ...
HighChart学习-更新数据data Series与重绘
一:HighChart介绍基于JQuery的纯JavaScript的图标库,支持各种图表显示,同时还支持Mootools 与Prototype详细版本支持在这里: JQuery 1.3.2 - 1. ...
R语言绘制ROC曲线图
受试者工作特征曲线(ROC曲线),最初作为一种分析方法在二战时用于评价雷达性能(鉴别敌方,友方以及噪音),目前广泛应用于医学诊断.生物信息学.数据挖掘和机器学习等研究中. ROC曲线可用于评价生物标记 ...
R语言绘制生存曲线图
R语言绘制生存曲线图 KMunicate是支持按照Morris等人的KMunicate研究推荐的方式生成Kaplan-Meier图. 1958年,Edward L. Kaplan 和Paul Meie ...
绘制测试集、训练集的每一个病人或者样本的raidomics signiture图（绘制raidomics signature图），以及ROC曲线图
绘制测试集.训练集的每一个病人或者样本的raidomics signiture图(绘制raidomics signature图),以及ROC曲线图受试者工作特征曲线 (receiver operat ...
曲线图绘制软件_Origin教程丨一文教你快速绘制20种常用图
来源丨Paper绘图Origin是每一位科研工作者最常用的数据绘图软件之一,具备统计.峰值分析和曲线拟合等分析功能,可以绘制出二维和三维图形. 一.绘制线(Line)图二.绘制误差棒图三.绘制散点图 ...

highchart 曲线图

highchart 曲线图相关推荐

最新文章

热门文章