highcharts 常用属性

来源：互联网发布：学美工需要多少钱? 编辑：程序博客网时间：2024/06/05 08:10

highcharts 常用属性总结

highcharts 作为一个用纯 javascript 编写的图表库，极大的方便了我们的图表绘制，而且支持多种图表类型。几乎我们能想到的图表类型都可以通过一些 json 格式的数据配置轻松实现。

highcharts 的配置及其属性有很多，下面我简单总结一些我认为常用的属性：

首先highcharts 的基本语法：

Highcharts.chart ('container',{       chart: {              backgroundColor: #f6f6f6,              type: 'areaspline'       }});

配置一（图表配置）：chart: {

animation: Boolean | Object // 动画效果

( 默认为 true，false代表禁用动画 | 可以设置持续时间和持续效果)

backgroundColor: Color // 背景色

( 默认#FFFFFF,可以设置渐变颜色 )

borderColor: Color // 边框颜色

( 默认#335cad,还可以设置borderRadius和borderWidth等属性)

className: string

(应用于图表容器的div的css类名，允许每个图表使用单独的样式)

hight: number | string

( 默认高度是根据容器高度计算出来，也可设置宽度width)

inverted: Boolean

( 设置是否反转坐标轴)

margin: Array // 边距

( 默认为0 )

plotBackgeroundColor: color // 绘图区背景色

( 可以设置渐变颜色，可以通过plotBackgeroundImage 设置背景图片)

type: String // 图表类型

( 默认为line )

}

配置二（标题）：title: {

align: String // 标题对齐方式

( 默认为center )

text: String // 标题内容

}

配置三（图例说明）：legend: {

align: String // 图例对齐方式

( 默认为center，可以通过verticalAlign设置垂直对齐方式 )

backgroundColor: Color // 背景色

borderColor: Color // 边框颜色

( 还可设置borderRadius和borderWidth )

enabled: Boolean // 图例开关

( 默认为开，true )

title: String

( 通过text 设置名称内容 )

layout: String // 图例数据项布局

( 默认为水平，horizontal)

x: Number

( x为负值，图例在水平对齐的基础上向左偏移，也可以设置y值)

}

配置四（x轴）：xAxis: {

categories: Array

( 分类坐标轴中的分类 )

gridLineColor: Color // 坐标轴的网格线颜色

lineColor: Color // 轴线颜色

max: Number

( 设置为null时，自动计算最大值，也可通过min设置最小值 )

title: String // 坐标轴标题

type: String // 坐标轴类型

visible: Boolean // 是否显示坐标轴

}

配置五（y轴）：yAxis: {

基本属性和x轴相同

}

配置六（数据提示框）：tooltip: {

animation: Boolean // 是否启用动画

( 默认为true，低版本IE浏览器，默认禁用动画 )

backgroundColor: Color // 背景色

borderColor: Color

( 还可设置borderRadius和borderWidth )

followPointer: Boolean // 提示框是否跟随鼠标

valueSuffix: String // 数据列y值的后缀字符串（例如单位）

}

配置七（版权配置）：credits: {

enable: Boolean // 是否显示版权信息

( 默认为显示，true )

text: String // 版权信息内容

(默认为Highcharts.com)

}

配置八（数据列）：series: {

color: Color // 数据列的颜色

name: String // 数据列的名字

(将会显示在图例，数据提示框中)

marker: {

enabled: Boolean // 是否关闭数据点标记

( 默认值为null，会自动根据数据的密集程度来自动关闭和隐藏)

}

data: Array // 数据值

}

配置九（数据）：data: {

columns: Array // 列数据

( 用不同数组设置图表的各项分类及数据，可以通过rows设置行数据)

csv: String

( 获取需要解析的数据 )

startRow: Number

( 规定数据解析范围的开始行，可以通过 endRow 规定结束行)

startColumn: Number

( 指定需要解析的数据的开始列数，默认为0。可以通过endColumn指定结束列数)

table: string | HTML element

( 指定需要解析的表格 )

}

阅读全文

0 0