Highcharts入门小示例
一、创建条形图
1、创建div容器
<div id="container" style="min-width:800px;height:400px"></div>
2、编写图表配置代码
相关示例：
<html>
<head>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script>
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'My first Highcharts chart'
},
xAxis: {
categories: ['苹果', '香蕉', '橙子'] //指定x轴分组
},
yAxis: {
title: {
text: 'something'
}
},
series: [{ //指定数据列
name: '小明', //数据列名
data: [1, 0, 4] //数据
}, {
name: '小红',
data: [5, 7, 3]
}]
});
});
</script>
</head>
<body>
<div id="container" style="min-width:800px;height:400px;"></div>
</body>
</html>
运行后的效果：
二、如何学习Highcharts
1、准备知识
- 熟悉Html、jQuery、Json、Ajax等前端知识
- 至少会一种后台语言，例如 Php、Java、Asp.net、Nodejs 等（Highcharts只是做数据展现，具体的数据来源必须通过动态语言）
2、几点建议
- 学习任何东西都是从实例模仿、自己实践中掌握的
- 多看API，Highcharts 提供的API文档非常完善，几乎所有的问题都可以在 API 找到解决办法
Highcharts入门小示例的更多相关文章
- Web应用开发（Servlet+html+Mysql）入门小示例
在安装好eclipse并配置完安装环境.安装好tomcat的前提下: 1.新建Dynamic Web Project,选择好运行的tomcat服务器版本等:2.在WebContent下: 新建fo ...
- ReactNative新手学习之路06滚动更新ListView数据的小示例
本节带领大家学习使用ListView 做一个常用的滚动更新数据示例: 知识点: initialListSize={200} 第一次加载多少数据行 onEndReached={this.onEndRea ...
- 02SpringMvc_springmvc快速入门小案例（XML版本）
这篇文章中,我们要写一个入门案例,去整体了解整个SpringMVC. 先给出整个项目的结构图:
- Spring IoC、DI入门小程序
Alt+/智能提示xml配置文件节点及属性:在接口上使用Ctrl+T可以提示其实现类 一.IoC控制反转(将创建对象的权利交给spring)入门小程序 1.引入jar包 2.工程基本结构 3.新建Us ...
- Highcharts入门+Highcharts基础教程，【非常值得学习的资料】
http://www.hcharts.cn/docs/index.php?doc=index Highcharts入门章节目录 Highcharts简介 Highcharts下载与使用 Highcha ...
- highCharts入门-强大的图表库插件
简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业 ...
- Selenium WebDriver + Grid2 + RSpec之旅（三） ----入门小例子
Selenium WebDriver + Grid2 + RSpec之旅(三) ----入门小例子 第一个例子都是比较简单的博客园登录界面,就像学习编程语言时候都是从Hello,World!开始. 1 ...
- MVC客户端验证的小示例
MVC客户端验证的小示例 配置客户端验证的可用性: <configuration> <appSettings> <add key="ClientValidat ...
- spring boot入门小案例
spring boot 入门小案例搭建 (1) 在Eclipse中新建一个maven project项目,目录结构如下所示: cn.com.rxyb中存放spring boot的启动类,applica ...
随机推荐
- 从EF的使用中探讨业务模型能否脱离单一存储层完全抽象存在
上次赶时间,就很流水账地写了上次项目对EF的一次实践应用模式,因为太长了,也没能探讨太多,所以再继续扩展. 这次想探讨的是,实体,如果作为类似于领域模型的业务模型存在,它的数据能否来自不同的数据源.这 ...
- C# BS消息推送 负载均衡-SignalR&Redis的配置（三）
1. 前言 本文是根据网上前人的总结得出的. 环境: SignalR2.x,VS2015,Win10 2. 负载均衡配置 配置很简单,只要在startup类中添加Redis的连接就OK. 1)首先,引 ...
- 【Win 10 应用开发】手写识别
记得前面(忘了是哪天写的,反正是前些天,请用力点击这里观看)老周讲了一个14393新增的控件,可以很轻松地结合InkCanvas来完成涂鸦.其实,InkCanvas除了涂鸦外,另一个大用途是墨迹识别, ...
- 【.net深呼吸】非 Web 项目使用缓存
从.net 4 开始,非web项目也可以使用缓存技术,故曰:.net 4 乃框架成熟之标志也. 对于缓存嘛,耍过 ASP.NET 的伙伴们肯定知道,这么说吧,就是将一些使用频率较高的数据放于内存中,并 ...
- JavaScript具有自动垃圾回收机制
JavaScript具有自动垃圾回收机制 原理: 找出那些不再继续使用的变量,然后释放其占用的内存. 正常的生命周期: 局部变量指在函数执行的过程中存在.而在这个过程中,会为局部变量在栈或 ...
- 6.LibSVM核函数
libsvm的核函数类型(svmtrain.c注释部分): "-t kernel_type : set type of kernel function (default 2)\n" ...
- Eclipse中文语言包安装和设置中文Doc
1.安装中文语言包 Eclipse所有的扩展功能都是以插件的形式添加上去的,安装插件时有多种形式,下面是比较常用的两种: 直接将插件中的文件复制到Eclipse对于的目录中.优点是安装时很方便,缺点是 ...
- 前端学HTTP之摘要认证
前面的话 上一篇介绍的基本认证便捷灵活,但极不安全.用户名和密码都是以明文形式传送的,也没有采取任何措施防止对报文的篡改.安全使用基本认证的唯一方式就是将其与SSL配合使用 摘要认证与基本认证兼容,但 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（6）-Unity 依赖注入
系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 本节重构一下代码,采用IOC控制反转,也就是依赖注入 您可以访问http://unity.codeplex.com/rel ...
- SQL Server-聚焦聚集索引对非聚集索引的影响（四）
前言 在学习SQL 2012基础教程过程中会时不时穿插其他内容来进行讲解,相信看过SQL Server 2012 T-SQL基础教程的童鞋知道前面写的所有内容并非都是摘抄书上内容,如若是这样那将没有任 ...