Highcharts入门之基本属性

一.基本组成：

1.Highcharts包含标题（Title）：主标题是必须的但是subTTitle不是必须

2.坐标轴（Axis）：有x坐标（xAxis）和y坐标（yAxis）

3.数据列（Series）：每个曲线，每个柱形条组，每个饼图的部分

4.数据提示框（Tooltip）：鼠标放上去的提示框

5.图例（Legend）：通过点击标示可以显示或隐藏该数据列

6.<!--more-->

7.版权信息（Credits）：一般是highcharts的官网，指定credits.enabled=false不让显示

8.导出功能按钮（Exporting）：需要包含exporting.js

9.标示线（PlotLines）：主动添加如平均线等

二.参数属性：

1、调用highcharts：

方法一：

$(function () {
    $(".chart").highcharts({});
});

方法二：

var charts = new Highcharts.Chart({
  // Highcharts 配置
  chart : {
    renderTo : "container" // 注意这里一定是 ID 选择器
  }
});

2、设置表格宽高：

等同于设置div的宽高：

style="width: 800px ;height: 400px"

3、图表样式：

常见的有：border、backgroundColor、margin、spacing、style

总结

以上就是Highcharts入门之基本属性的全部内容，希望对大家学习Highcharts有所帮助，小编还会陆续更新Highcharts的相关文章，请继续关注我们。

赞 (0)

相关推荐

  • Highcharts使用简例及异步动态读取数据

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

  • 动态更新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

  • Highcharts入门之简介

    Highcharts入门之简介

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

  • 浅析jquery的js图表组件highcharts

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

  • PHP+mysql+Highcharts生成饼状图

    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 多个Y轴动态刷新数据的实现代码

    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

  • 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学习之数据列

    Highcharts学习之数据列

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

  • Highcharts入门之基本属性

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

  • Javascript highcharts 饼图显示数量和百分比实例代码

    Javascript highcharts 饼图显示数量和百分比实例代码 最近公司项目需求有这样一个功能模块,highcharts 饼图显示数量和百分比 ,由于本人刚入门,看到这个需求不会写,于是就上网搜下相关资料,觉得一篇还不错记录下. <div class="piecleft" id="chart" style="height:350px; width: 350px;"> </div> <script type=

  • Spring入门到精通之Bean标签详解

    目录 Bean标签基本配置 Bean标签范围配置 Bean生命周期配置 Bean的依赖注入入门 Bean的依赖注入概念 Bean的依赖注入方式 Bean的依赖注入的数据类型 引入其他配置文件(分模块开发) Bean标签基本配置 用于配置对象交由Spring 来创建. 默认情况下它调用的是类中的无参构造函数,如果没有无参构造函数则不能创建成功. 基本属性: id:Bean实例在Spring容器中的唯一标识 class:Bean的全限定名称 Bean标签范围配置 scope:指对象的作用范围,取值如

  • AngularJS入门教程之AngularJS表达式

    表达式用于应用程序数据绑定到HTML.表达式都写在双括号就像{{表达式}}.表达式中的行为跟ng-bind指令方式相同. AngularJS应用表达式是纯javascript表达式,并输出它们被使用的数据在那里. AngularJS表达式格式 : {{expression }} AngularJS表达式可以是字符串.数字.运算符和变量 数字运算{{1 + 5}} 字符串连接{{ 'abc' + 'bcd' }} 变量运算 {{ firstName + " " + lastName }}

  • Python入门教程 超详细1小时学会Python

    Python入门教程 超详细1小时学会Python

    为什么使用Python    假设我们有这么一项任务:简单测试局域网中的电脑是否连通.这些电脑的ip范围从192.168.0.101到192.168.0.200. 思路:用shell编程.(Linux通常是bash而Windows是批处理脚本).例如,在Windows上用ping ip 的命令依次测试各个机器并得到控制台输出.由于ping通的时候控制台文本通常是"Reply from ... " 而不通的时候文本是"time out ... " ,所以,在结果中进行

  • BACKBONE.JS 简单入门范例

    BACKBONE.JS 简单入门范例

    11年刚开始用前端MVC框架时写过一篇文章,当时Knockout和Backbone都在用,但之后的项目全是在用Backbone,主要因为它简单.灵活,无论是富JS应用还是企业网站都用得上.相比React针对View和单向数据流的设计,Backbone更能体现MVC的思路,所以针对它写一篇入门范例,说明如下: 1. 结构上分4节,介绍Model/View/Collection,实现从远程获取数据显示到表格且修改删除: 2. 名为"范例",所以代码为主,每节的第1段代码都是完整代码,复制粘

  • 前端构建 Less入门(CSS预处理器)

    Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. Less 可以运行在 Node.浏览器和 Rhino 平台上.网上有很多第三方工具帮助你编译 Less 源码. 一.前言 说到前端构建怎能缺少CSS预处理器呢!其实CSS的预处理器有很多啦,比较出名的有Scss.Sass.Stylus和Less.(最近还听说出现了Autoprefixer等CSS后处理器,可参考@一丝的PPT) 众多CSS预处理

  • AngularJS入门教程之Helloworld示例

    AngularJS入门教程之Helloworld示例

    本文实例讲述了AngularJS入门教程之Helloworld示例.分享给大家供大家参考,具体如下: 什么是AngularJs? angularjs是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于,利用数据绑定和依赖注入,它使你不用再写大量的代码了.这些全都通过浏览器端的javascript实现,这也使得它能够完美地和任何服务器技术结合. AngularJS简单的Helloworld例子: <!D

  • AngularJS实用基础知识_入门必备篇(推荐)

    前言 今天来和大家学习一下AngularJS-- AngularJS 通过新的属性和表达式扩展了 HTML. AngularJS 可以构建一个单一页面应用程序. AngularJS 学习起来非常简单. 一.AngularJS指令与表达式 [AngularJS常用指令] 1.ng-app:声明Angular所管辖的区域,一般写在body或HTML上,原则上一个页面只有一个. 2.ng-model:把元素值(比如输入域的值)绑定到应用程序的变量中. eg:<input type="text&q

随机推荐