Highcharts使用教程(1):制作简单图表
今天我们要使用JavaScript图表Highcharts制作简单的柱形图,我们已经安装好Highcharts,让我们开始制作图表吧。
步骤一
在网页中添加一个div。设置id,设置图表长、高。代码如下:
1
|
<div id= "container" style= "width:100%; height:400px;" ></div> |
步骤二
添加JavaScript标签初始化图表,放在网页任何地方都可,继续下面的jQuery代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
$( function () { $( '#container' ).highcharts({ chart: { type: 'bar' }, title: { text: 'Fruit Consumption' }, xAxis: { categories: [ 'Apples' , 'Bananas' , 'Oranges' ] }, yAxis: { title: { text: 'Fruit eaten' } }, series: [{ name: 'Jane' , data: [1, 0, 4] }, { name: 'John' , data: [5, 7, 3] }] }); }); |
上面的代码利用jQuey打开已准备好的代码文件,如果使用MooTools或者Prototype代替 $(function ()语法,会有一点不同。而且,Highcharts在这些框架中并不是一个插件。因此,需要使用 Highcharts.Chart constructor并定义 chart.renderTO进行选择。
MooTools
1
2
3
4
5
6
7
|
window.addEvent( 'domready' , function () { var chart1 = new Highcharts.Chart({ chart: { renderTo: 'container' , type: 'bar' ... }); |
Prototype
1
2
3
4
5
6
7
|
document.observe( "dom:loaded" , function () { var chart1 = new Highcharts.Chart({ chart: { renderTo: 'container' , type: 'bar' ... }); |
如果你嵌入Stock chart,这里有一个单独的构造函数方法——Highcharts.StockChart。在这张图表中图表以在一个单独的JavaScript数组提供,即不来自单独的JavaScript文件也不来自Ajax调用服务器。
>>>>全文
》》下载JavaScript图表Highcharts
Highcharts使用教程(1):制作简单图表的更多相关文章
- 【HighCharts系列教程】三、图表属性——chart
一.chart属性说明 Chart是HighCharts图表中主要属性,包括了图表区域的颜色.线条.高度.宽度.对齐.图表类型等诸多属性,也是HighCharts图表中必须配置的属性之一. 配置cha ...
- HTML5+CSS3系列教程——如何制作简单按钮笔记
1.按钮的制作方式 用图片(目前用的不多) 纯CSS a标签 input 图片二决定了input的类型 当input的type属性是submit button等这些的时候他呈现一个按钮 butto ...
- Highcharts使用教程(2):设置选项
Highcharts使用教程(2):设置选项 使用教程 | 作者:走猫步的鱼 | 2013-12-11 09:33:25 | 阅读 16次 评论 1 概述:JavaScript图表工具Highchar ...
- 网页图表Highcharts实践教程之外层图表区
网页图表Highcharts实践教程之外层图表区 Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将详细 ...
- 网页图表Highcharts实践教程之图表代码构成
网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程如 ...
- 网页图表Highcharts实践教程之认识Highcharts
网页图表Highcharts实践教程之认识Highcharts 认识Highcharts Highcharts是国际知名的一款图表插件.它完全使用Javascript编写实现.其结构清晰,使用简单.开 ...
- 网页图表Highcharts实践教程之图表区
网页图表Highcharts实践教程之图表区 网页图表Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将 ...
- Unreal Engine 4 系列教程 Part 5:制作简单游戏
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
- Unreal Engine 4 系列教程 Part 10:制作简单FPS游戏
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
随机推荐
- Java编程中-servlet
今天将别人的项目导入eclipse之后,出现了“The import javax.servlet cannot be resolved”错误 import javax.servlet.ServletE ...
- linux一些基本命令
linux查看自己外网ip:curl ifconfig.me 删除目录:rm -rf 目录名 查看版本:rpm -q 版本 修改文件的用户权限:chown kds:kds agent.crontab修 ...
- Run P4 without P4factory - A Simple Example In Tutorials.
前言 本文是我运行P4社区于Github开源教程Tutorials中的P4 SIGCOMM 2015 Tutorial一些实战小结,Github链接: Github. 测试的例子:P4 SIGCOMM ...
- quicksort
快排.... void quicksort(int *a,int left,int right){ if(left >= right){ return ; } int i = left; int ...
- Vmware安装Centos NAT方式设置静态IP
[Vmware中在搭建集群环境等,DHCP自动获取IP方式不方便,为了固定IP减少频繁更改配置信息,建议使用静态IP来配置,网络连接主要有三种方式 1.nat 2.桥接,3主机模式 ,在这里主要介NA ...
- 数值分析之QR因子分解篇
在数值线性代数中,QR因子分解的思想比其他所有算法的思想更为重要[1]. --Lloyd N. Trefethen & ...
- Scala的trait
一:说明 1.介绍 2.功能 二:具体解释功能 1.定义接口 2.定义方法 3.定义字段 4.定义抽象字段 5.混合trait
- eclipse安装svn进行版本控制
1)通过help->installsoft->svn->add 填入http://subclipse.tigris.org/update_1.8.x 选择这两个,等其下载 2)配置一 ...
- 简单理解js的this
js的this是什么?关于这个东西,博客园里面有太多的解释了,不过,本人看了一下,感觉对this解释的有点复杂了,因此,本人在此给this一个简单易于理解的定义. this其实是js的一个对象,至于是 ...
- xargs -I
xargs -i 参数或者-I参数配合{}即可进行文件的操作. -I replace-str Replace occurrences of replace-str ...