Highcharts是一个非常成熟的绘制图表的前端库，由纯JS编写。能够很方便的在实际项目中添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。目前HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。
HighCharts的UI设计非常优美，由于使用纯JS编写，所以不需要像Flash和Java那样需要插件才可以运行，而且运行速度较快。最重要的是，HighCharts还有很好的兼容性，能够兼容当前主流的浏览器。详细的文档，可以参考：www.highcharts.com.
下面，我将分享使用highcharts在实际项目中绘制动态曲线图的例子，先上代码：
QtAvgCostChartPanel = function() {
this.plot;
var scope = this;
//获取Provider(应用名)
var appArr2store = buildCombo.getApp();
//当Provider App默认值为search时，按search加载Service Name、Service MethodName及providerHost默认的下拉框列表
//获取ProviderHost
var providerArr2store = buildCombo.getProvider('search');
//获取service(服务名)
var serviceArr2store = buildCombo.getService('search');
//初始化service methodName(服务方法名)
var methodArr2store = new Ext.data.ArrayStore({
fields:['methodName','methodName']
});
this.toolBar = [ '-', 'Provider App:', {
id : 'providerApp_QtAvg',
xtype : 'combo',
width : 155,
listWidth : 200,
value : 'search',//设置默认值
store : appArr2store,
valueField : 'appCode',
displayField : 'appCode',
selectOnFocus : true,
mode : 'local',
triggerAction : 'all',
listeners:{
'select': function(){
//选择App的值，可以级联确定service及providerHost下拉框列表
var appValue = this.getRawValue();
Ext.getCmp('providerHost_QtAvg').store.removeAll(); //清除缓存数据
Ext.getCmp('serviceName_QtAvg').store.removeAll(); //清除缓存数据
Ext.getCmp('serviceMethodName_QtAvg').store.removeAll(); //清除缓存数据
//当重新选择时，清空各下拉框显示值及原始值
Ext.getCmp('serviceName_QtAvg').clearValue();
Ext.getCmp('serviceMethodName_QtAvg').clearValue();
Ext.getCmp('providerHost_QtAvg').clearValue();
//获取service(服务名)
var serviceArr2store = buildCombo.getService(appValue);
//重新加载数据(local)
Ext.getCmp('serviceName_QtAvg').store.loadData(serviceArr2store);
//获取ProviderHost
var providerArr2store = buildCombo.getProvider(appValue);
//重新加载数据(local)
Ext.getCmp('providerHost_QtAvg').store.loadData(providerArr2store);
scope.query();
}
}
}, '-','Provider Host:', {
id : 'providerHost_QtAvg',
xtype : 'combo',
width : 155,
listWidth : 180,
store : providerArr2store,
valueField : 'hosts',
displayField : 'hosts',
selectOnFocus : true,
mode : 'local',
triggerAction : 'all',
listeners:{
'select': function(){
scope.query();
}
}
}, '-','Service Name:', {
id : 'serviceName_QtAvg',
xtype : 'combo',
width : 155,
listWidth : 280,
store : serviceArr2store,
valueField : 'service',
displayField : 'service',
selectOnFocus : true,
mode : 'local',
triggerAction : 'all',
listeners:{
'select': function(){
var appValue = Ext.getCmp('providerApp_QtAvg').getRawValue();
var selectedValue = this.getRawValue();
Ext.getCmp('serviceMethodName_QtAvg').store.removeAll(); //清除缓存数据
//当重新选择时，清空各下拉框显示值及原始值
Ext.getCmp('serviceMethodName_QtAvg').clearValue();
//获取service nameMethod(服务方法名)
var methodArr2store = buildCombo.getServiceMethod(appValue,selectedValue);
//重新加载数据(local)
Ext.getCmp('serviceMethodName_QtAvg').store.loadData(methodArr2store);
scope.query();
}
}
}, '-','Service MethodName:', {
id : 'serviceMethodName_QtAvg',
xtype : 'combo',
width : 155,
listWidth : 420,
store : methodArr2store,
valueField : 'methodName',
displayField : 'methodName',
selectOnFocus : true,
mode : 'local',
triggerAction : 'all',
listeners:{
'select': function(){
scope.query();
}
}
}, '-',{
iconCls : 'ms-query',
xtype : 'button',
text : "查找",
handler : this.query,
scope : this
}];
this.reportPanel = new Ext.BoxComponent(
{
border : false,
autoEl : {
tag : 'div',
html : "<div id='QtAvgCostChartDiv' style='width:80%;height:90%;'></div>"
},
anchor : 'none -24'
});
QtAvgCostChartPanel.superclass.constructor.call(this, {
id : 'QtAvgCostChart',
title : '平均耗时',
margins : '0 0 5 5',
cmargins : '0 5 5 5',
closable : true,
tbar : this.toolBar,
bbar : this.bottomBar,
layout : 'fit',
autoScroll : true,
items : [this.reportPanel],
listeners : {
'beforedestroy' : function(){
clearInterval(this.reVal);
}
}
});
};
Ext.extend(QtAvgCostChartPanel, Ext.Panel, {
query : function() {
var param = {
providerApp : Ext.getCmp("providerApp_QtAvg").getRawValue(),
providerHost : Ext.getCmp("providerHost_QtAvg").getRawValue(),
serviceName : Ext.getCmp("serviceName_QtAvg").getRawValue(),
serviceMethodName : Ext.getCmp("serviceMethodName_QtAvg").getRawValue()
};
clearInterval(this.reVal);
this.draw("quarterAnalystService", "getMemoMinsAvgCost" , param);
},
init : function() {
this.draw("quarterAnalystService", "getMemoMinsAvgCost" , {});
},
draw : function(service, method ,param){
var me = this;
Highcharts.setOptions({
global : {
useUTC: false
}
});
var chart,
maxMinData = {},
params = Ext.encode({s : service, m : method, p : param});
$('#QtAvgCostChartDiv').highcharts({
chart : {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
events : {
load : function(){
var series = this.series[0];
var loadData = function(){
maxMinData = {};
$.ajax({
type : "post",
url : "ajax.do",
data : {rmi : params},
async : false,
success : function(response){
if(!Ext.isEmpty(response)){
var xdata = response['xdata'],
ydata = response['ydata'],
others = response['others'];
for(var i = 0, len = xdata.length; i<len; i++){
maxMinData[xdata[i]] = others[i];//保存最大值最小值
var x = xdata[i], y = ydata[i];
var isShift = series.data.length >= 15;//防止数据过大，造成浏览器崩溃
series.addPoint([x,y], true, isShift);
}
}
}
});
}
loadData();//首次加载数据
me.reVal = setInterval(loadData, 30000);//动态获取数据,并保存返回值
}
}
},
title : {
text: '平均耗时实时监控'
},
xAxis : {
type: 'category'
},
yAxis : {
title : {
text : '平均耗时/ms'
},
min : 0,
plotLines : [{
value : 0,
width : 1,
color: '#808080'
}]
},
tooltip : {
formatter : function(){
var max_min = maxMinData[this.point.name] && maxMinData[this.point.name].split(',');
if(!max_min){
return '<b>'+ this.series.name +
'</b><br/>'+this.point.name+
'<br />'+'平均值 ：'+this.y +
'<br />'+'最大值 ：'+ 0 +
'<br />'+'最小值 ：'+ 0 ;
}
return '<b>'+ this.series.name +
'</b><br/>'+this.point.name+
'<br />'+'平均值 ：'+this.y +
'<br />'+'最大值 ：'+max_min[0]+
'<br />'+'最小值 ：'+max_min[1];
}
},
legend : {
enabled : false
},
exporting : {
enabled : false
},
credits : {
enabled : false
},
series : [{
name : '平均耗时',
data : []
}]
});
}
});
Ext.reg("QtAvgCostChart", QtAvgCostChartPanel);
上面是一个平均耗时的代码，使用了Extjs，关键的绘图代码是方法draw : function(service, method ,param){},在load事件中，使用了jquery的ajax方法同步取数据，因为后面要用到这些数据，故而使用了同步方法。其中：
var isShift = series.data.length >= 15;//防止数据过大，造成浏览器崩溃
这里是因为每次均获取15分钟的数据，故此，当图中数据大于15个，将会删除最前面的数据点。动态加载的方法是loadData，每半分钟刷新一次。效果如下：
相关推荐
在"highcharts加载多条曲线数据"的场景下，我们通常指的是在一个图表中同时展示多组数据，每组数据表现为一条曲线，这样可以更直观地对比和分析不同数据系列的变化趋势。 首先，我们需要引入Highcharts库和jQuery库...
在这个实例中，我们将关注如何使用Highcharts创建动态曲线图，并结合Java Native Access (JNA)库来实时监控CPU的使用率。 动态曲线图是一种能够实时更新数据的图表，常用于展示随时间变化的趋势。在Highcharts中，...
在本文中，我们将深入探讨如何使用Highcharts动态实现曲线图和饼型图的展示。 首先，为了使用Highcharts，你需要在客户端的HTML页面中引入必要的JavaScript文件。如描述所示，这通常包括`highcharts.js`主文件，...
Highcharts.js是一款强大的JavaScript图表库，它允许开发者轻松地在网页上创建各种动态、交互式的图表，包括曲线图、柱状图、面积图等多种图表类型。这个库以其易用性、灵活性和丰富的定制选项而受到广泛欢迎。在...
3. JavaScript库：如D3.js、Chart.js、Highcharts、ECharts和本文提到的DemoTeechart等，它们提供了丰富的图表类型和强大的API，简化了动态加载曲线图的开发工作。例如，DemoTeechart是一个强大的图表库，支持多种...
这个例子展示了如何在Java后端与Highcharts前端之间建立有效的通信，通过AJAX和JSON实现动态数据更新。这种架构在实时监控、数据分析、仪表盘等场景下非常常见，因为它可以实现实时刷新的图表，用户无需手动刷新页面...
Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它能够帮助开发者轻松创建出各种美观的数据可视化图形，如柱状图、曲线图和饼状图等。本实例是关于如何结合PHP和MySQL数据库，利用Highcharts进行动态数据...
本篇将详细介绍如何利用Highcharts结合MySQL数据库，实现在Web应用中动态生成折线图。 首先，我们需要了解Highcharts的基本使用。Highcharts是一个轻量级的图表库，它提供了丰富的API和配置选项，可以自定义图表...
"Vue 中使用vue2-highcharts实现曲线数据展示的方法" 在本文中，我们将介绍如何使用Vue框架和vue2-highcharts库来实现曲线数据展示的方法。通过本文，读者可以学习如何使用vue2-highcharts来创建一个简单的曲线图表...
在这个场景中，我们将探讨如何使用Java和Highcharts这两个工具来实现一个动态的、交互式的折线图。Highcharts是一个流行的JavaScript库，专门用于创建高质量的图表，而Java则作为后端语言，负责处理数据并将其传递给...
本文将详细介绍如何利用QWebEngineView呈现HighCharts图形，并实现曲线的拖拽功能。 首先，我们需要了解HighCharts的基本使用。HighCharts通过在HTML页面中嵌入JavaScript代码来生成图表。我们可以通过设置各种配置...
在这个特定的场景中，我们关注的是如何实现"Highcharts多个图表共用一个提示框，每个图表多条曲线"的功能。这通常涉及到对Highcharts API的深入理解和定制。 首先，我们要理解Highcharts的提示框（tooltip）是用于...
高级特性：Highchart曲线图的实现** 创建Highcharts曲线图需要编写HTML和JavaScript代码。首先，在HTML中引入Highcharts的JavaScript库，然后在JavaScript中配置图表的选项，最后调用`Highcharts.chart()`方法绘制...
Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它能够帮助开发者轻松创建各种类型的交互式图表，包括折线图、柱状图、饼图、散点图等，而且非常适合用来绘制类似股票曲线图的动态数据展示。这个插件以其...
本项目利用Highcharts库、Ajax异步请求以及Json数据格式，实现了动态的曲线图、柱状图和饼图，为数据报表提供了一种直观且吸引人的呈现方式。 Highcharts是一个强大的JavaScript图表库，它支持多种图表类型，如折线...
要实现"实时显示highcharts曲线图，读取本地txt文件"，首先需要对Highcharts的基本概念和API有深入理解。Highcharts的核心是配置对象，通过设置这个对象的各种属性，我们可以定制图表的样式、数据、交互行为等。例如...
Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它能够帮助开发者轻松创建各种动态、交互式的图表，包括曲线图和饼状图。这个库以其简洁的API、强大的自定义能力和跨浏览器兼容性而受到欢迎。在本文中，...
支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图； 跨语言：不管是PHP、.net还是Java都可以使用，它只需要三个文件：一个是 Highcharts的核心文件highcharts.js，还有a ...
总之，Highcharts的js文件是构建数据可视化的强大工具，无论是简单的柱状图还是复杂的动态曲线图，都能轻松实现。通过深入理解和灵活运用这些文件，开发者可以提升Web应用的数据展示能力，为用户提供直观易懂的图表...
Highcharts是一款强大的JavaScript图表库，用于在Web页面上...无论是饼状图、柱状图还是曲线图，都能通过灵活的配置和自定义实现各种需求。通过深入学习和实践，你将能够熟练掌握Highcharts，提升你的数据可视化能力。