今天我们要使用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):制作简单图表的更多相关文章

  1. 【HighCharts系列教程】三、图表属性——chart

    一.chart属性说明 Chart是HighCharts图表中主要属性,包括了图表区域的颜色.线条.高度.宽度.对齐.图表类型等诸多属性,也是HighCharts图表中必须配置的属性之一. 配置cha ...

  2. HTML5+CSS3系列教程——如何制作简单按钮笔记

      1.按钮的制作方式 用图片(目前用的不多) 纯CSS a标签 input 图片二决定了input的类型 当input的type属性是submit button等这些的时候他呈现一个按钮 butto ...

  3. Highcharts使用教程(2):设置选项

    Highcharts使用教程(2):设置选项 使用教程 | 作者:走猫步的鱼 | 2013-12-11 09:33:25 | 阅读 16次 评论 1 概述:JavaScript图表工具Highchar ...

  4. 网页图表Highcharts实践教程之外层图表区

    网页图表Highcharts实践教程之外层图表区 Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将详细 ...

  5. 网页图表Highcharts实践教程之图表代码构成

    网页图表Highcharts实践教程之图表代码构成 Highcharts第一个实例 下面我们来实现本书的第一个Highcharts实例. [实例1-1]下面来制作北京连续一周最高温度折线图.操作过程如 ...

  6. 网页图表Highcharts实践教程之认识Highcharts

    网页图表Highcharts实践教程之认识Highcharts 认识Highcharts Highcharts是国际知名的一款图表插件.它完全使用Javascript编写实现.其结构清晰,使用简单.开 ...

  7. 网页图表Highcharts实践教程之图表区

    网页图表Highcharts实践教程之图表区 网页图表Highcharts图表区 图表区是图表的基本区域.所有的数据和图形都是绘制在图表区中.从图形绘制范围来分,图表区域分为外层图表区和绘图区.本章将 ...

  8. Unreal Engine 4 系列教程 Part 5:制作简单游戏

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  9. Unreal Engine 4 系列教程 Part 10:制作简单FPS游戏

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

随机推荐

  1. Java编程中-servlet

    今天将别人的项目导入eclipse之后,出现了“The import javax.servlet cannot be resolved”错误 import javax.servlet.ServletE ...

  2. linux一些基本命令

    linux查看自己外网ip:curl ifconfig.me 删除目录:rm -rf 目录名 查看版本:rpm -q 版本 修改文件的用户权限:chown kds:kds agent.crontab修 ...

  3. Run P4 without P4factory - A Simple Example In Tutorials.

    前言 本文是我运行P4社区于Github开源教程Tutorials中的P4 SIGCOMM 2015 Tutorial一些实战小结,Github链接: Github. 测试的例子:P4 SIGCOMM ...

  4. quicksort

    快排.... void quicksort(int *a,int left,int right){ if(left >= right){ return ; } int i = left; int ...

  5. Vmware安装Centos NAT方式设置静态IP

    [Vmware中在搭建集群环境等,DHCP自动获取IP方式不方便,为了固定IP减少频繁更改配置信息,建议使用静态IP来配置,网络连接主要有三种方式 1.nat 2.桥接,3主机模式 ,在这里主要介NA ...

  6. 数值分析之QR因子分解篇

    在数值线性代数中,QR因子分解的思想比其他所有算法的思想更为重要[1].                                       --Lloyd N. Trefethen & ...

  7. Scala的trait

    一:说明 1.介绍 2.功能 二:具体解释功能 1.定义接口 2.定义方法 3.定义字段 4.定义抽象字段 5.混合trait

  8. eclipse安装svn进行版本控制

    1)通过help->installsoft->svn->add 填入http://subclipse.tigris.org/update_1.8.x 选择这两个,等其下载 2)配置一 ...

  9. 简单理解js的this

    js的this是什么?关于这个东西,博客园里面有太多的解释了,不过,本人看了一下,感觉对this解释的有点复杂了,因此,本人在此给this一个简单易于理解的定义. this其实是js的一个对象,至于是 ...

  10. xargs -I

    xargs  -i 参数或者-I参数配合{}即可进行文件的操作.   -I replace-str              Replace  occurrences  of  replace-str ...