(三)、使用HighCharts创建第一个图表实例
2014-01-28 13:56
489 查看
在你的项目中引入上一篇中提到的js文件，项目根目录下新建一个JS文件夹，然后将前面下载的js文件放入该文件夹下，放入后的效果如下：
在前台aspx页面中，引入以上js文件，如下：
[c-sharp] view
plaincopy
<mce:script src="JS/jquery1.5.2.js" mce_src="JS/jquery1.5.2.js" type="text/javascript"></mce:script>
<mce:script src="JS/HighCharts/highcharts.js" mce_src="JS/HighCharts/highcharts.js" type="text/javascript"></mce:script>
<!-- 添加主题样式js文件 -->
<mce:script src="JS/HighCharts/themes/grid.js" mce_src="JS/HighCharts/themes/grid.js" type="text/javascript"></mce:script>
<!--添加导出模式 -->
<mce:script src="JS/HighCharts/modules/exporting.js" mce_src="JS/HighCharts/modules/exporting.js" type="text/javascript"></mce:script>
接下来，看下Script脚本中的内容：
[c-sharp] view
plaincopy
<mce:script type="text/javascript"><!--
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'area', //图表类型 line, spline, area, areaspline, column, bar, pie , column，scatter
inverted: false //左右显示，默认上下正向。假如设置为true，则横纵坐标调换位置
},
xAxis: {
categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日' ], //X轴的坐标值
title: {text: '周数'}, //Y轴坐标标题 labels:纵柱标尺
},
yAxis: {
title: {text: '人数(人)'}, //Y轴坐标标题 labels:纵柱标尺
min:0
},
tooltip: {
formatter: function() {
//当鼠标悬置数据点时的格式化提示
return '总人数:' + Highcharts.numberFormat(this.y, 1)+'人<br/>当前周:'+ this.x ;
}
},
credits: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2, //图表柱形的
borderWidth: 0 //图表柱形的粗细
},bar: {
dataLabels: {
enabled: false
}
}
},
title: { text: '图表主标题' }, //图表主标题
subtitle: {text: '图表子标题' }, //图表副标题
series:[{ name: '人数', data: [20, 40, 30, 90, 100, 60, 50] }]
});
});
/ --></mce:script>
里面字段有注释，很容易看得出各个字段的意义。
下面贴出全部代码，及效果图：
[c-sharp] view
plaincopy
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="HighCharts_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<mce:script src="JS/jquery1.4.2.js" mce_src="JS/jquery1.4.2.js" type="text/javascript"></mce:script>
<mce:script src="JS/HighCharts/highcharts.js" mce_src="JS/HighCharts/highcharts.js" type="text/javascript"></mce:script>
<!-- 添加主题样式js文件 -->
<mce:script src="JS/HighCharts/themes/grid.js" mce_src="JS/HighCharts/themes/grid.js" type="text/javascript"></mce:script>
<!--添加导出模式 -->
<mce:script src="JS/HighCharts/modules/exporting.js" mce_src="JS/HighCharts/modules/exporting.js" type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column', //图表类型 line, spline, area, areaspline, column, bar, pie , column，scatter
inverted: false //左右显示，默认上下正向。假如设置为true，则横纵坐标调换位置
},
xAxis: {
categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日' ], //X轴的坐标值
title: {text: '周数'}, //Y轴坐标标题 labels:纵柱标尺
},
yAxis: {
title: {text: '人数(人)'}, //Y轴坐标标题 labels:纵柱标尺
min:0
},
tooltip: {
formatter: function() {
//当鼠标悬置数据点时的格式化提示
return '总人数:' + Highcharts.numberFormat(this.y, 1)+'人<br/>当前周:'+ this.x ;
}
},
credits: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2, //图表柱形的
borderWidth: 0 //图表柱形的粗细
},bar: {
dataLabels: {
enabled: false
}
}
},
title: { text: '图表主标题' }, //图表主标题
subtitle: {text: '图表子标题' }, //图表副标题
series:[{ name: '人数', data: [20, 40, 30, 90, 100, 60, 50] }]
});
});
// --></mce:script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto">
</div>
</div>
</form>
</body>
</html>
如果将代码中defaultSeriesType: 'column'修改成
defaultSeriesType: 'spline ', //图表类型 line, spline, area, areaspline, column, bar, pie , column，scatter
则样式样式如下：
如果将代码中defaultSeriesType: 'column'修改成
defaultSeriesType: 'area ', //图表类型 line, spline, area, areaspline, column, bar, pie , column，scatter
则样式样式如下：
在前台aspx页面中，引入以上js文件，如下：
[c-sharp] view
plaincopy
<mce:script src="JS/jquery1.5.2.js" mce_src="JS/jquery1.5.2.js" type="text/javascript"></mce:script>
<mce:script src="JS/HighCharts/highcharts.js" mce_src="JS/HighCharts/highcharts.js" type="text/javascript"></mce:script>
<!-- 添加主题样式js文件 -->
<mce:script src="JS/HighCharts/themes/grid.js" mce_src="JS/HighCharts/themes/grid.js" type="text/javascript"></mce:script>
<!--添加导出模式 -->
<mce:script src="JS/HighCharts/modules/exporting.js" mce_src="JS/HighCharts/modules/exporting.js" type="text/javascript"></mce:script>
接下来，看下Script脚本中的内容：
[c-sharp] view
plaincopy
<mce:script type="text/javascript"><!--
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'area', //图表类型 line, spline, area, areaspline, column, bar, pie , column，scatter
inverted: false //左右显示，默认上下正向。假如设置为true，则横纵坐标调换位置
},
xAxis: {
categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日' ], //X轴的坐标值
title: {text: '周数'}, //Y轴坐标标题 labels:纵柱标尺
},
yAxis: {
title: {text: '人数(人)'}, //Y轴坐标标题 labels:纵柱标尺
min:0
},
tooltip: {
formatter: function() {
//当鼠标悬置数据点时的格式化提示
return '总人数:' + Highcharts.numberFormat(this.y, 1)+'人<br/>当前周:'+ this.x ;
}
},
credits: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2, //图表柱形的
borderWidth: 0 //图表柱形的粗细
},bar: {
dataLabels: {
enabled: false
}
}
},
title: { text: '图表主标题' }, //图表主标题
subtitle: {text: '图表子标题' }, //图表副标题
series:[{ name: '人数', data: [20, 40, 30, 90, 100, 60, 50] }]
});
});
/ --></mce:script>
里面字段有注释，很容易看得出各个字段的意义。
下面贴出全部代码，及效果图：
[c-sharp] view
plaincopy
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="HighCharts_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<mce:script src="JS/jquery1.4.2.js" mce_src="JS/jquery1.4.2.js" type="text/javascript"></mce:script>
<mce:script src="JS/HighCharts/highcharts.js" mce_src="JS/HighCharts/highcharts.js" type="text/javascript"></mce:script>
<!-- 添加主题样式js文件 -->
<mce:script src="JS/HighCharts/themes/grid.js" mce_src="JS/HighCharts/themes/grid.js" type="text/javascript"></mce:script>
<!--添加导出模式 -->
<mce:script src="JS/HighCharts/modules/exporting.js" mce_src="JS/HighCharts/modules/exporting.js" type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
var chart;
$(document).ready(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column', //图表类型 line, spline, area, areaspline, column, bar, pie , column，scatter
inverted: false //左右显示，默认上下正向。假如设置为true，则横纵坐标调换位置
},
xAxis: {
categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日' ], //X轴的坐标值
title: {text: '周数'}, //Y轴坐标标题 labels:纵柱标尺
},
yAxis: {
title: {text: '人数(人)'}, //Y轴坐标标题 labels:纵柱标尺
min:0
},
tooltip: {
formatter: function() {
//当鼠标悬置数据点时的格式化提示
return '总人数:' + Highcharts.numberFormat(this.y, 1)+'人<br/>当前周:'+ this.x ;
}
},
credits: {
enabled: false
},
plotOptions: {
column: {
pointPadding: 0.2, //图表柱形的
borderWidth: 0 //图表柱形的粗细
},bar: {
dataLabels: {
enabled: false
}
}
},
title: { text: '图表主标题' }, //图表主标题
subtitle: {text: '图表子标题' }, //图表副标题
series:[{ name: '人数', data: [20, 40, 30, 90, 100, 60, 50] }]
});
});
// --></mce:script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto">
</div>
</div>
</form>
</body>
</html>
如果将代码中defaultSeriesType: 'column'修改成
defaultSeriesType: 'spline ', //图表类型 line, spline, area, areaspline, column, bar, pie , column，scatter
则样式样式如下：
如果将代码中defaultSeriesType: 'column'修改成
defaultSeriesType: 'area ', //图表类型 line, spline, area, areaspline, column, bar, pie , column，scatter
则样式样式如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- IE8开发人员工具教程（二）
- 按右键另存图片只能存BMP
- photoshop去除图片上的水印
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- js可突破windows弹退效果代码
- JSP脚本漏洞面面观
- 图片引发的溢出危机(图)
- javascript asp教程第六课-- response方法
- javascript asp教程More About Recordsets
- javascript asp教程第十二课---session对象
- javascript asp教程创建数据库连接
- javascript asp教程错误处理
- javascript asp教程第十课--global asa