文档章节

使用Highcharts制作简单图表

咲晚杍
 咲晚杍
发布于 2013/12/04 11:45
字数 401
阅读 230
收藏 1

今天我们要使用JavaScript图表Highcharts制作简单的柱形图,我们已经安装好Highcharts,让我们开始制作图表吧。

步骤一

在网页中添加一个div。设置id,设置图表长、高。代码如下:

<div id="container" style="width:100%; height:400px;"></div>


 步骤二

添加JavaScript标签初始化图表,

放在网页任何地方都可,继续下面的jQuery代码:


$(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

window.addEvent('domready', function() {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
...
});

Prototype

document.observe("dom:loaded", function() {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
...
});

如果你嵌入Stock chart,这里有一个单独的构造函数方法——Highcharts.StockChart。在这张图表中图表以在一个单独的JavaScript数组提供,即不来自单独的JavaScript文件也不来自Ajax调用服务器。

var chart1; // globally available
$(function() {
chart1 = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdtoeur // predefined JavaScript array
}]
});
});

步骤三

现在我们可以看到展现在网页上的图表:


步骤四

这一步可选。你可以为你的图表添加一个主题。通过设置Highcharts.setOptions实现。下载预定义主题,添加以下代码来操作:

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

 

本文转载自:http://www.evget.com/article/2013/12/2/20138.html

咲晚杍
粉丝 7
博文 75
码字总数 8143
作品 0
渝中
私信 提问
Highcharts图表结构分析:详解标题与副标题

JavaScript图表Highcharts默认,标题显示在图表的头部,可选的副标题显示在其下。 标题和副标题内容可以通过如下代码设置 title: {text: '自定义标题'},subtitle: {text: '自定义副标题'} 关...

咲晚杍
2013/12/31
1K
0
cheng5x/YcHighCharts

Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等; 对个人用户完全免费; 纯JS,无BS; 支持大部分的图表类型:直线图...

cheng5x
2015/08/05
0
0
FusionCharts与HighCharts功能对比分析

选择一个图表组件是一项复杂的任务,因为选择图表时,既要考虑当前需要,又要能应对未来多变的复杂业务需求。 所以,在选择图表的时候,我们需要对图表有更深入的对比和研究。接下来,小编将...

flyingsnail
2014/04/18
563
0
Highcharts插件制作中文教程

Highcharts强大的扩展功能,是它深受广大用户喜爱的原因之一。通过使用highcharts api,很多使用者根据自己的需求制作了highcharts插件,实现了各种功能扩展。关于highcharts 中文教程资源已...

咲晚杍
2014/05/20
303
0
纯 Javascript 图表 - Highcharts

Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等; 对个人用户完全免费; 纯JS,无BS; 支持大部分的图表类型:直线图...

匿名
2009/12/10
139.4K
22

没有更多内容

加载失败,请刷新页面

加载更多

001-docker的基础概念

安装 yum install docker;systemctl status docker 我们启动docker的时候,docker会帮我们创建一个docker 0的网桥 docker 基础命令 查看当前镜像 docker images 搜索镜像 docker search 执行...

侠客行之石头
49分钟前
5
0
OSChina 周六乱弹 —— 不要在领导修风扇的时候打开电扇

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @巴拉迪维 :《Whats Up》 主唱妹子 Lina Perry 的嗓音实在太有力了,收放自如的自信才能唱出这么优秀的歌吧!#今日歌曲推荐# 《Whats Up》-...

小小编辑
今天
26
2
SpringBoot集成Elasticsearch并进行增删改查操作

一、创建工程 使用IntelliJ创建SpringBoot工程 SpringBoot版本为2.0.4 ElasticSearch为5.6.10 删掉蓝框中的文件(如上) 最后我们的目录结构(如下) 下面pom文件主要修改的是把spring boot从Int...

一字见心
今天
5
0
聊聊rocketmq的TransientStorePool

序 本文主要研究一下rocketmq的TransientStorePool TransientStorePool rocketmq-all-4.6.0-source-release/store/src/main/java/org/apache/rocketmq/store/TransientStorePool.java publi......

go4it
昨天
6
0
笔记

场外借贷, 质押 ,托管, 永续合约. 场外借贷,n签合同. 新功能 证券交易组负责中信证券机构及个人投资交易相关系统,服务机构及个人投资客户, 涉及到两融、期权、 期货、做市等境内境外创新业...

MtrS
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部