返回首页
当前位置: 主页 > 编程语言 > HTML教程 >

如何使用Highcharts创建网页图表

时间:2013-12-26 00:18来源:电脑教程学习网 www.etwiki.cn 编辑:admin

如果你正在寻找如何创建图表,那我们这篇文章就是为你准备的。我曾经在网上找了很多的资料,怎样去完美的解决创建图表的方案,让我惊喜的是发现了一个很好的很强悍的Javascript图表库:Highcharts。 这是一个纯Javascript库,它主要包括两个部分:Highcharts和Highstock。Highcharts可以为您的网站或Web应用程序提供直观,互动式的图表。目前支持线,样条,面积,areaspline,柱形图,条形图,饼图和散点图类型。Highstock可以为您方便地建立股票或一般的时间轴图表。它包括先进的导航选项,预设的日期范围,日期选择器,滚动和平移等等。

Active charts using Highcharts 
在线演示 下载源码 OK,下载好源码,现在可以开始coding了!

第一步:HTML
<!-- add scripts -->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script type="text/javascript" src="js/highcharts.js"></script>

<script type="text/javascript" src="js/gray.js"></script>

<script type="text/javascript" src="js/main.js"></script>

其实Highcharts也是一个jQuery库,所以在顶部还是要引用jQuery库。在我们的附件里面,gray.js是自定义图表设计。你还可以看到其他的几个小文件:dark-blue.js,dark-green.js,grid.js和skies.js。他们都定义了不同的设计风格。你可以选择其中的一个js文件(本例中是引用了gray.js灰色风格)看不同的图表设计。最后一个文件:main.js这是个初始化代码文件。在我们的演示中提供了不同的图表,让我们看看最终的代码:

<!-- Chart type switchers -->
<div>
<button id="column">column</button>
<button id="area">area</button>
<button id="line">line</button>
<button id="spline">Spine</button>
<button id="areaspline">areaspline</button>
</div>
<!-- two different charts -->
<div id="chart_1"></div>

第二步:CSS
现在的图标没有任何样式风格,我们需要给图表加上一些固定的宽度和按钮的样式: css/main.css

.actions, .chart {
margin: 15px auto;
width: 820px;
}

button {
background: none repeat scroll 0 0 #E3E3E3;
border: 1px solid #BBBBBB;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 1px 1px #F6F6F6 inset;
color: #333333;
font: bold 12px;
margin: 0 5px;
padding: 8px 0 9px;
text-align: center;
text-shadow: 0 1px 0 #FFFFFF;
width: 150px;
}

button:hover {
background: none repeat scroll 0 0 #D9D9D9;
box-shadow: 0 0 1px 1px #EAEAEA inset;
color: #222222;
cursor: pointer;
}

button:active {
background: none repeat scroll 0 0 #D0D0D0;
box-shadow: 0 0 1px 1px #E3E3E3 inset;
color: #000000;
}

------分隔线----------------------------
标签(Tag):html5 html html技巧 html实例教程 html源代码 html基础教程
------分隔线----------------------------
推荐内容
猜你感兴趣