1、demo1 复合指标图
<html>
<head>
<meta name="viewport" content="width = device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script>
$(document).ready(function() {
//一天24小时数组
var mycars=new Array();
for(var i = 0;i < 24; i++) {
mycars[i] = i+":00-" + (i+1) + ":00" ;
}
//traffic(客流量)
var traffic_data = eval("[20, 34, 59, 26, 54, 56, 42, 38, 47, 59, 75, 12, 23, 59, 109, 0, 55, 452, 75, 236, 14, 44, 2, 8]");
//销售额
var cumulative_sales_data = eval("[420, 758, 594, 366, 459, 252, 446, 381, 417, 549, 715, 112, 231, 591, 149, 145, 505, 125, 715, 276, 140, 414, 241, 801]");
//traget Sales(目标销售额)
var target_cumulative_sale_data = eval("[411, 525, 424, 452, 445, 441, 774, 568, 147, 414, 444, 222, 478, 145, 758, 414, 444, 789, 236, 456, 257, 478, 412, 236]");
$("#container2").highcharts({
chart: {
zoomType: 'xy',
height: 465,
marginBottom: 130,
resetZoomButton: {
position: {
align: 'center',
y: 400
},
relativeTo: 'chart'
}
},
legend: {
align: 'center',
verticalAlign: 'bottom',
y: 10
},
title: {
text: '实时报表',
style: {
color: '#89A54E',
fontWeight: 'bold'
}
},
xAxis: [{
title: {text: '实时报表/时'},
gridLineWidth: 1,
categories: mycars //显示x轴数据的数组
}],
yAxis: [{
gridLineWidth: 0,
title: {
text: 'SALES',
style: {
color: '#000'
}
},
labels: {
formatter: function() {
return '$' + this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '.00';
},
style: {
color: '#000',
fontWeight: 'bold'
}
},
opposite: true,
min: 0
},
{
labels: {
formatter: function() {
return this.value;
},
style: {
color: '#000',
fontWeight: 'bold'
}
},
title: {
text: 'TRAFFIC',
style: {
color: '#000',
fontWeight: 'bold'
}
},
min: 0,
gridLineWidth: 0
}],
tooltip: {
shared: true
},
series: [{
name: '销售额',
color: '#89A54E',
type: 'spline',
marker: {
enabled: false
},
data: cumulative_sales_data,
tooltip: {
valuePrefix: '$'
}
},
{
name: 'Target Sales',
type: 'spline',
color: '#7a7a7a',
marker: {
enabled: false
},
data: target_cumulative_sale_data,
tooltip: {
valuePrefix: '$'
}
},
{
name: 'Traffic',
color: '#4572A7',
type: 'spline',
marker: {
enabled: false
},
yAxis: 1,
data: traffic_data,
tooltip: {
valueSuffix: ''
}
}],
lang: {
noData: '没有可用数据。'
}
});
});
</script>
</head>
<body scroll="auto">
<div id="container2"></div>
</body>
</html>
相关推荐
Highcharts 是一款强大的JavaScript图表库，它用于在Web页面上创建各种交互式的图表，如折线图、柱状图、饼图等。Highcharts-ZH_CN.js是Highcharts的中文语言包，它提供了中文本地化的支持，使得图表的标题、图例、...
1、针对中文优化的Highcharts插件，优化的内容有 汉化了图表中所有文字 优化了时间显示 图表中额外的资源替换为国内稳定快速的CDN服务--Highcharts中文网CDN服务 2、使用方法 不需要修改图表其他配置，只需要引入...
Highcharts是一款强大的JavaScript图表库，它能够帮助开发者创建各种类型的互动图表，如折线图、柱状图、饼图、散点图等。在“highcharts-zh_CN.js”文件中，主要包含了Highcharts的中文语言包，目的是为了将图表中...
Gatling-Charts-Highcharts-Bundle是Gatling的一个扩展，它提供了与Highcharts图表库集成的报告功能，使得测试结果的可视化更加强大和直观。 标题中的"gatling-charts-highcharts-bundle-3.3.1-bundle.zip"表明这是...
highcharts-more.js 文件 可用于制作仪表盘等 highcharts-more.js 文件 可用于制作仪表盘等 highcharts-more.js 文件 可用于制作仪表盘等 highcharts-more.js 文件 可用于制作仪表盘等
最后，Highcharts提供了多种图表类型，包括折线图、柱状图、饼图、散点图、面积图、热力图等，这些丰富的图表类型覆盖了数据分析和展示的多个场景，为开发者提供了极大的便利。 标签"Highcharts charts"进一步强调...
highcharts中文转换js能够将英文转换...Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表，其中很多图表可以集成在同一个图形中形成混合图。
... 1 优点： 1.gatling和其他压力工具相比有个好处是放在同一内网环境下linux服务器上，这样避免其他压力使用办公机使用共有网络，网络情况对压力测试的影响。 2 生成比较详细的压力测试报告。...
Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它提供了丰富的图表类型，如折线图、柱状图、饼图等，用于数据可视化展示。"Highcharts-export-module-asp.net-master"是一个专门针对Highcharts的ASP.NET...
6. **图表报告**："gatling-charts-highcharts-1.5.4"这部分可能指的是Gatling内置的基于Highcharts的报告生成器，Highcharts是一个流行的JavaScript库，用于创建高质量的、互动的数据可视化图表。在Gatling中，它...
Highcharts是一款广泛应用于Web开发中的JavaScript图表库，主要用于创建交互式的柱状图、折线图、饼图等数据可视化图表。3.0.9是Highcharts的一个版本，它可能包含了该版本的所有特性、修复和改进。这个zip压缩包...
3. **丰富的图表类型**：除了基础的柱状图、折线图、饼图，Highcharts还提供面积图、桑基图、热力图、雷达图等多种图表，满足各种数据分析展示需求。 4. **高度可定制化**：颜色、样式、数据标签、图例、工具提示等...
Highcharts支持多种图表类型，包括柱状图、折线图、饼图、散点图（气泡图）、面积图、热力图、甘特图等，适用于各种数据分析和可视化需求。 5. **图表的交互性**： Highcharts的图表具有丰富的交互功能，如点击...
Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它允许开发者创建动态、交互式的柱状图、线图、饼图等多种类型的图表。这个"Highcharts-4.0.4.zip"压缩包是Highcharts的4.0.4版本，包含完整的API文档以及...
"examples"目录下可能包含了一系列使用Highcharts创建的示例代码，涵盖了各种图表类型（如折线图、柱状图、饼图、散点图等）和各种特性（如动画、数据列格式化、事件处理等）。通过查看这些例子，开发者可以学习如何...
3. **丰富的图表类型**：Highcharts 支持多种图表类型，包括折线图、柱状图、饼图、散点图、面积图、甘特图等，以及更复杂的组合图表，如面积范围图、瀑布图等。这些丰富的图表类型可以满足不同领域的数据展示需求。...
Highcharts是一款广泛应用于Web开发中的JavaScript图表库，它允许开发者轻松创建各种动态、交互式的图表，包括饼图、折线图、3D立体图、柱状图等多种图表类型。"highcharts-4.1.6.zip"是Highcharts库的一个特定版本...
highcharts-3d的资源包，用于在制图过程中显示出3D的样式