Highcharts入门之简介

2024-09-27 10:02:40

在网页中创建一个这样的图表，你觉得会要多久？

确实需要很久很久，如果你对JavaScript不是特别熟练的话。

但是有个好消息就是如果，你使用Highcharts框架的话，可能十多行代码就能让你在页面中生成这样有特效的图表。

当然他的功能远不止这些，各种图表，打印，导出，对比分析。

他不仅仅可以用来做网站的图表分析，就是在有什么总结演示的时候用这个做出来的东西想必也是让人眼前一亮吧，完全就可以抛弃PPT了啊。

所以赶紧来了解如何使用他吧！！！

下面给一个简单的Dome：

1.在highcharts中属性以逗号隔开

2.一个大的属性中使用{}，在{}中填写具体的属性

3.除了数据其他的属性一般使用”"包含

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div class="chart" style="width: 800px ;height: 400px">
</div>
<script>
  $(function () {
    $(".chart").highcharts({  //指定在class为chart的地方创建图表
      chart:{
        type:'line'   //图表的类型，还有column等
      },
      title:{
        text:'Dome01'  //图表的标题
      },
      xAxis:{
        categories:['A','B','C','D']  //x坐标的分组
      },
      yAxis:{
        title:{
          text:'some'   //y坐标的标题
        }
      },
      series:[{
        name:'zhangsan',  //数据的名称
        data:[2,3,5,3]   //具体的数据
      },{
        name:'lisi',
        data:[3,5,1,3]
      },{
        name:'wangwu',
        data:[1,4,6,2]
      }]
    }) ;
  });
</script>
</body>
</html>

如果现在看不懂也没关系，可以放在浏览器里试一试，后续我还会更新Highcharts的相关文章，感兴趣的朋友们可以继续支持我们。

Highcharts学习之坐标轴

前言所有的图表除了饼图都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧(多个y轴时可以是显示在左右两侧),通过设置chart.inverted = true 可以让x,y轴显示位置对调. 下面一起来学习学习Highcharts的坐标轴. tags: 1.标题 xAxis:{ title:{ text:'x轴标题' } } yAxis:{ title:{ text:'y轴标题' } } 2.标签 labels:enabled.formatter.setp yAxis:{ labe
Highcharts入门之基本属性

一.基本组成: 1.Highcharts包含标题(Title):主标题是必须的但是subTTitle不是必须 2.坐标轴(Axis):有x坐标(xAxis)和y坐标(yAxis) 3.数据列(Series):每个曲线,每个柱形条组,每个饼图的部分 4.数据提示框(Tooltip):鼠标放上去的提示框 5.图例(Legend):通过点击标示可以显示或隐藏该数据列 6. 7.版权信息(Credits):一般是highcharts的官网,指定credits.enabled=fa
Highcharts使用简例及异步动态读取数据

Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.HighCharts支持的图表类型有曲线图.区域图.柱状图.饼状图.散状点图和综合图表. 第一部分:在head之间加载两个JS库. <script src="html/js/jquery.js"></script> <script src="html/js/ch
Highcharts学习之数据列

什么是数据列数据列是一组数据集合,例如一条线,一组柱形等.图表中所有点的数据都来自数据列对象,数据列的基本构造是: series : [{ name : '', data : [] }] 提示:数据列配置是个数组,也就是数据配置可以包含多个数据列. 数据列中的 name 代表数据列的名字,并且会显示在数据提示框(Tooltip)及图例(Legend)中 tags: 1.数据列中的数据填充: 方法一:一维数组如果有categories属性的话就是使用一维数组 data : [1, 4, 6,
动态更新highcharts数据的实现方法

动态更新highcharts数据的实现方法 <!doctype html> <html> <head> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="htt
浅析jquery的js图表组件highcharts

Highcharts是一个制作图表的纯Javascript类库, 主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone.IE和火狐等等: 对于非商用用户免费(包括个人网站.非盈利性组织.学生团体等). 纯JS,无BS: 支持大部分的图表类型:直线图,曲线图.区域图.区域曲线图.柱状图.饼装图.散布图: 跨语言:不管是PHP..net还是Java都可以使用,它只需要三个文件:一个是 Highcharts的核心文件highcharts.js,还有a canvas emulator for
Highcharts 多个Y轴动态刷新数据的实现代码

效果图: js代码: $(function() { $(document).ready(function() { Highcharts.setOptions({ global: { useUTC: false } }); var chart; chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'spline', animation: Highcharts.svg, // don't animate in ol
PHP+mysql+Highcharts生成饼状图

Mysql 首先我们建一张·chart_pie·表作为统计数据. -- -- 表的结构 `chart_pie` -- CREATE TABLE IF NOT EXISTS `chart_pie` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(30) NOT NULL, `pv` int(10) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUT
Highcharts入门之简介

在网页中创建一个这样的图表,你觉得会要多久? 确实需要很久很久,如果你对JavaScript不是特别熟练的话. 但是有个好消息就是如果,你使用Highcharts框架的话,可能十多行代码就能让你在页面中生成这样有特效的图表. 当然他的功能远不止这些,各种图表,打印,导出,对比分析. 他不仅仅可以用来做网站的图表分析,就是在有什么总结演示的时候用这个做出来的东西想必也是让人眼前一亮吧,完全就可以抛弃PPT了啊. 所以赶紧来了解如何使用他吧!!! 下面给一个简单的Dome: 1.在highchart
Go语言基础入门应用简介及常用命令

目录 Go语言简介 Go语言的主要特点[重点] Go语言应用 Go语言中常用命令 Go语言中可见性规则[重点] Go语言简介 Go 是一门开源.支持并发.垃圾回收的编译型系统编程语言从 2007 年末由 Robert Griesemer,Rob Pike,Ken Thompson 主持开发,后来还加入了 lan Lance Taylor,Russ Cox 等人并最终在 2009年11月开源,在 2012 年早些时候发布了 Go 1 稳定版本. Go语言的主要特点[重点] 没有继承多态的面向对象
jQuery入门知识简介

到目前为之jQuery已经发布到1.4.2版本,而在这之前的一个星期他们刚发布1.4版本,看看他的各个版本的发布时间 ,不难发现他的飞速发展,每个月都在更新版本:而且不断有人开发出新的 jQuery插件 ,最近又推出了 jQuery UI 库 jQuery于2006年一月十四号在BarCamp NYC (New York City)面世.主将 John Resig ,写有<Pro JavaScript Techniques>一书,因为效力于mozolla,据说firefox 3将包含Jque
详解react-redux插件入门

可先查看我的redux简单入门 react-redux简介 react-redux是使用redux开发react时使用的一个插件,另外插一句,redux不是react的产品,vue和angular中也可以使用redux:下面简单讲解,如何使用react-redux来开发react. 描述这个插件可以让我们的redux代码更加的简洁和美观.我假设你已经有一个使用create-react-app创建的一个可以显示hello world的react环境,并且已经安装来redux. 注意:如果是刚使用
Linux、Windows下Redis的安装即Redis的基本使用详解

目录前言什么是Redis 使用Redis能做什么 Redis入门 Redis简介 Redis下载与安装 Redis下载 Redis安装 Redis服务启动与停止 Ctrl + C停止Redis服务 Ctrl + C停止Redis服务 Redis配置文件 Redis常用命令字符串string操作命令哈希hash操作命令列表list操作命令集合set操作命令通用命令在Java中操作Redis Jedis Spring Data Redis 使用方式环境搭建前言什么是Redis
Spark入门简介

SPARK Apache Spark 是专为大规模数据处理而设计的快速通用的计算引擎.Spark是UC Berkeley AMP lab (加州大学伯克利分校的AMP实验室)所开源的类Hadoop MapReduce的通用并行框架,Spark,拥有Hadoop MapReduce所具有的优点:但不同于MapReduce的是Job中间输出结果可以保存在内存中,从而不再需要读写HDFS,因此Spark能更好地适用于数据挖掘与机器学习等需要迭代的MapReduce的算法. Spark 是一种与 Had
Struts1简介和入门_动力节点Java学院整理

本文为大家分享了Struts1简介和入门的学习资料,供大家参考,具体内容如下 1. 框架框架(Framework)是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法.也就是说框架是一个半成品的应用程序. 我们所面对的应用程序一般都是分为两部分,一部分是业务相关的组件部分,另一部分是和业务无关的组件部分.而我们知道和业务相关的组件部分的重用性是非常低的,这也是显而易见的事情:而和业务无关的组件部分,如验证.异常.程序流程控制等等服务组件的复用性是非常高的.所以当人们在不同的应
基于Spring MVC 简介及入门小例子(推荐)

一.什么是 Spring MVC Spring MVC 属于 SpringFrameWork 的后续产品,已经融合在 Spring Web Flow 里面,是一个强大灵活的 Web 框架.Spring MVC 提供了一个 DispatcherServlet 作为前端控制器来分配请求.通过策略接口,Spring 框架是高度可配置的.Spring MVC 还包含多种视图技术,如 Java Server Pages(JSP).Velocity.Tiles.iText 和 POI 等.Spring MV
OpenStack云计算快速入门教程(1)之OpenStack及其构成简介

该教程基于Ubuntu12.04版,它将帮助读者建立起一份OpenStack最小化安装.我是五岳之巅,翻译中多采用意译法,所以个别词与原版有出入,请大家谅解.我不是英语专业,我觉着搞技术最重要的就是理解,而不是四级和考研中那烦人的英译汉,所以我的目标是忠于原意.通俗表达,Over.英文原文在这里(http://docs.openstack.org/es@***/openstack-compute/starter/content/ ,请将ex@***中的@去掉,CU屏蔽的F词),下面步入正题: 第

Highcharts入门之简介

相关推荐

随机推荐