Highcharts
scalad
github地址:https://github.com/scalad
展开
-
HightChart的helloWorld程序
新建一个html文件,将highcharts引入到你的页面后,通过两个步骤我们就可以创建一个简单的图表了。1、创建div容器在页面的 body 部分创建一个div,并指定div 的 id,高度和宽度,代码如下2、编写Highcharts代码编写Highcharts必须的代码,用包裹,代码可以放在页面的任意地方,一个最简单的图表实例代码如下$(function转载 2015-09-12 19:59:31 · 420 阅读 · 0 评论 -
HightChart标示线(plotLines)
标示线数组是用标记来坐标轴上特殊值的,在绘图区内绘制一条自定义的线。标示线总是垂直于它属于的轴。它可单独定义在x轴或y轴,也可以同时定义在x轴和y轴。如果标示线同时定义在x轴和y轴,定义在y轴的标示线会显示在前面。具体实例如下:1、在x轴上值为3的地方画一条红色的宽度为2px的线xAxis: { // ... 省略代码 plotLines:[{ col转载 2015-09-13 16:18:06 · 3874 阅读 · 1 评论 -
HightChart的HTML标签(labels)
HTMl标签(Lables)指的是可以放置在图表中任意位置的文字标签,由于最终的文字标签是以 SVG 渲染的,所以标签的内容只支持少量的 HTML 标签,包括:、、、、、,其中 可以通过 style 属性来设定样式,但是有效的样式仅限和文字相关的属性。HTML 标签的基本构造是:labels: { style: { // 标签全局样式转载 2015-09-13 15:50:15 · 1611 阅读 · 0 评论 -
HightChart版权信息(credits)
图表版权信息。显示在图表右下方的包含链接的文字,默认是文字是 Highcharts,链接是Highcharts官网地址。通过指定credits.enabled=false即可不显示该信息。一、版权信息的常用属性版权信息常用的属性包括是否启用版权信息、文字、链接、位置等,详细列表如下:属性名描述默认值enabled是否显示版权信转载 2015-09-13 15:40:15 · 977 阅读 · 0 评论 -
HightChart图例(Legend)
图例是图表中用不同形状、颜色、文字等 标示不同数据列,通过点击标示可以显示或隐藏该数据列;通过设置 legend.enabled = true | false 来打开或关闭图例。一、图例样式1、图例容器样式图例容器指的是整个图例容器的样式,包含背景、边框、边距、宽度等,详细属性及说明见下表参数名解释默认值b转载 2015-09-13 15:32:40 · 10444 阅读 · 0 评论 -
HightChart数据提示框(Tooltip)
数据提示框指的当鼠标悬停在某点上时,以框的形式提示该点的数据,比如该点的值,数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定;通过设置 tooltip.enabled = false 即可不启用提示框。一、提示框外观下面的实例代码给出了关于数据提示框的外观的常用配置tooltip: { backgroundColor: '#FCFFC5',转载 2015-09-13 15:25:24 · 8974 阅读 · 0 评论 -
HightChart的坐标轴(Axis)
所有的图表除了饼图都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧(多个y轴时可以是显示在左右两侧),通过设置chart.inverted = true 可以让x,y轴显示位置对调。下图为图表中坐标轴组成部分图表坐标轴组成部分一、坐标轴组成部分1、Axis Title坐标轴标题。默认情况下,x轴为null(也就是没有title),y轴为'Va转载 2015-09-13 14:36:47 · 2509 阅读 · 0 评论 -
图表配置(Chart)
本节主要讲解图表配置,对应的 API 位置为 chart,主要内容包括图表全局样式、绘图区、图表事件、等相关内容。一、图表容器Highcharts 实例化中绑定容器的方式有两种1、通过 dom 调用 highcharts() 函数的方式$("#container").highcharts({ // Highcharts 配置 }); 2、通过 chart转载 2015-09-12 22:55:40 · 1339 阅读 · 0 评论 -
Highcharts兼容性
Highcharts完全基于本地浏览器技术,不需要任何插件,甚至不需要安装任何服务器环境,只需要两个js文件即可运行。Highcharts针对不同的js框架jQuery、Mootools、Prototype做了适配工作,不同框架开发人员不需要再额外学习其他框架即可上手。highcharts可以运行在任何现代浏览器,包括移动终端以及IE6,标准的浏览器用SVG技术渲染图表,对于遗留的浏览器,转载 2015-09-12 20:50:22 · 1230 阅读 · 1 评论 -
Highcharts配置
Highcharts 的运行需要两个 JS 文件, highcharts.js 及 jQuery 、 MooTools 、Prototype 、Highcharts Standalone Framework 常用 JS 框架中的一个。引入 JS 文件可以是引入本地文件和在线文件,针对不同的 JS 框架需要引入的文件有所不同,下面详细说明。一、引入在线资源1、jQuery转载 2015-09-12 19:52:42 · 676 阅读 · 0 评论 -
HightChart的数据列(Series)
一、什么是数据列数据列是一组数据集合,例如一条线,一组柱形等。图表中所有点的数据都来自数据列对象,数据列的基本构造是:series : [{ name : '', data : []}] 提示:数据列配置是个数组,也就是数据配置可以包含多个数据列。数据列中的 name 代表数据列的名字,并且会显示在数据提示框(Tooltip)及图例(Legend)中。转载 2015-09-13 15:01:49 · 1311 阅读 · 0 评论 -
HightChart设置标题(Title)
标题默认显示在图表的顶部,包括标题和副标题(subTitle),其中副标题是非必须的。设置标题和副标题的示例代码如下:title: { text: '我是标题'},subtitle: { text: '我是副标题'}一、标题的常用属性标题只有一些文字信息,所以标题的配置无非是一些定位、字体大小、颜色等的配置,常见属性如下表所示:属性名转载 2015-09-13 14:09:37 · 23706 阅读 · 0 评论 -
HightChart标示区(plotBands)
标示区同标示线,只不过标示的内容为一段范围。标示区的作用、事件等很多都类似标示线,这里就只是简单说明标示区的相关内容,不做过多累述。一、标示区的基本配置xAxis: { // ... 省略代码 plotBands: [{ from: , // 标示区开始值 to: , /转载 2015-09-13 16:23:15 · 3163 阅读 · 1 评论