highcharts 中文API

最新推荐文章于 2023-02-02 14:17:19 发布

乔巴大大

最新推荐文章于 2023-02-02 14:17:19 发布

阅读量7.2k

点赞数

分类专栏： highcharts web前端文章标签： api string function powerpoint download 图形

本文链接：https://blog.csdn.net/xiaojiang0829/article/details/8027286

版权

web前端同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

highcharts

4 篇文章 0 订阅

订阅专栏

highcharts 是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习。

它可以帮您完成复杂的表格类图形（线性，矩形，饼状，以及它们的组合类型），动态图，它甚至还能帮你绘制出一个构造精细的挂钟，车速表，电平表等等

而您只需要去官网下载免费的highCharts.js 然后复制到您工程的相关路径

附上官网地址：http://www.highcharts.com/

官网中有很多相关demo 和最新版API

选择对象

名称类型说明

var chart = new Highcharts.Chart({

chart

　　　　alignTicks　　　　:true　　Boolean　　多个y轴时对他们公共轴心的选取，ture为自动选取较适宜的公共轴心

　　　　animation　　　　:true　　BooleanObject　　动画更新效果

　　　　backgroundColor　　　　 :Color　　绘图区背景色

　　　　borderColor　　　　 :Color　　绘图边框颜色　

　　　　borderRadius　　　　 :Number　绘图边角的弧度设置

　　　　borderWidth　　　　 :Number　　　　边框宽度设置

　　　　className　　　　 :String　　　　确定绘图区容器的类区范围

　　　　defaultSeriesType　　　　 :Sting　　默认绘图类型的设置

　　　　events　　　　 :chart.events　　绘图触发事件

　　　　addSeries　　　 :Function　　添加series数据

　　　　click　　　　：Function　　单击事件

　　　　load　　　　 :Function　　加载事件

　　　　redraw　　　　：Function　　重画事件

　　　　selection　　　　 :Function　　选着区域事件

　　　　height　　　　 :Number　　高度

　　　　ignoreHiddenSeries　　　　:True　　Boolean　　多个数据时，隐藏一个数据是否更改轴心，true为可更改，false为不可更改

　　　　inverted　　　　:False　　 Boolean　　　数轴的转换

　　　　margin　　　　 :Numberr　　内边距设置

　　　　marginTop

　　　　marginBottom

　　　　marginRight

　　　　marginLeft

　　　　plotBackgroundColor　　　　:Color　　部分颜色的变化

　　　　plotBackgroundImage　　　　:String　　加载图片

　　　　plotBorderColor

　　　　plotBorderWidth

　　　　plotBorderShadow

　　　　reflow　　　　:True　　　　:Boolean　　是否跟谁容器大小改变

　　　　renderTo　　　　:String　　引用容器

　　　　resetZoonButton　　　　区域选择与重置图片与event事件中的selection事件相似

　　　　selectionMarkerFill　　　　悬着区域的颜色

　　　　shadow　　　　阴影

　　　　showAxes　　　　加载前轴的显示

　　　　spacingTop　　　　：Number 外边距

　　　　spacingBottom

　　　　spacingLeft

　　　　style　　　　：CSSObject 自定义样式

　　　　type　　　　绘图类型默认：line

　　　　width　　　　绘图宽度的设置

　　　　zoomType　　　　区域选择范围可与event.selection和resetZoomButton参考，他们是区域选择的功能接口

colors

colors: 颜色选项用于设置图表的颜色方案

自定义颜色方案的方法:

Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4']
});

[ '#4572A7',

'#AA4643',

'#89A54E',

'#80699B',

'#3D96AE',

'#DB843D',

'#92A8CD',

'#A47D7C',

'#B5CA92'

]

credits　　　　(右下角的名片说明)

　　　　enabled　　　　:Boolean　　默认值：True　　是否显示名片

　　　　position　　　　:Object　　位置的确定

　　　　href　　　　　　:String　　名片连接地址默认值：www.highcharts.com

　　　　style　　　　　　:CSSObject　　名片CSS模式

　　　　text　　　　　　:String　　名片显示名字　　默认值：highcharts.com

global　　Highcharts.SetOptions方法调用

　　　　canvasToolsURL　　　　:String　　　　画布工具连接，例如：Andrio的 2.0不支持SVG

　　　　useUTC　　　　:Boolean　　UTCtime　　　　http://jsfiddle.net/X3jPh/

labels　　HTML标签，可以放置在绘图的任何位置

　　　　item　　:Array

　　　　　　html　　:String

　　　　　　style　　:CSSObject

　　　　style　　　　：CSSObject

lang

　　　　decimalPoint　　　　 String　　　　小数点默认值"."

　　　　downloadPNG　　　　:String　　　　导出图片PNG 默认值："Download PNG image".

　　　　downloadJPEG　　　　:String 　　　导出图片JPEG 默认值： "Download JPEG image"

　　　　downloadPDF

　　　　downloadSVG

　　　　exportButtonTitle　　 :String　　　　导出图片按钮　　默认值： "Export to raster or vector image".

　　　　loading　　　 :String　　　　加载显示默认值： Loading....

months　　　　 :Array<String>　　　　月的数组 Highcharts.dateFormat() 默认值：['January', 'February', 'March', 'April', 'May','June', 'July', 'August', 'September', 'October', 'November', 'December'].

　　　　shortMonths　　上边月的缩写数组

　　　　printButtonTitle　　 : String 　　　　打印按钮　　默认值： "Print the chart".

　　　　resetZoom　　　　 :String　　　　重置焦距默认值： Reset zoom.

　　　　resetZoomTitle　　　　:String　　　　重置焦距设置默认值： Reset zoom level 1:1.

　　　　thousandsSep　　　　:String　　　　前分为默认值：",".例如：1，000,000

weekdays　　　　 :Array<String>　　　星期数组　　默认值： ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday','Saturday'].

legend(图列说明)
- alight :String 水平对齐样式默认:"center".
- backgroundColor :String 填充颜色默认: null.
- borderColor 边框颜色默认：“#909090”
- borderRadius :Number 边框圆角化程度数值越大边框越圆默认： 5px
- borderWidth :Number 边线粗细程度
- enabled :boolean 是否显示legend box
- floating :boolean 是否悬浮默认：FALSE
- itemHiddenStyle color 图形隐藏后的样式
- itemHoverStyle color 鼠标覆盖事件样式
- itemMarginBottom number 边框内间距
- itemMarginTop
- itemStyle CSSObject CSS设置
- itemWidth number legend item 宽度
- labelFormatter Function 如果你想在series标签前后加点什么
- layout String 标签的布局默认 horizontal（水平）
- lineHeight number
- margin number 与图表的距离
- padding number 与内边框的距离
- reversed boolean 是否将 legend item 倒序排列默认 false
- rtl boolean legend 是否互换中小图标和文字的位置
- shadow boolean 阴影
- style CSSObject
- symbolPadding Number symbol（小图标）与文字的距离
- symbolWidth Number symbol（小图标）的宽度
- verticalAlign String 可以是 "top", "middle" or "bottom"中的一个大体确定legend垂直位置然后可以根据 ‘y’ 属性调节。
- width number legend box的宽度
- x number 微调legend box的相对位置
- y
loading 设置加载事件样式
pane 嵌入设置（用于比较复杂图形绘制具体参见： highcharts 官方API ）
plotOptions 细节选择器（如果想对所有绘制图形（series）生效可以在plotOptions. series下设置否则请在具体的类型下设置如： plotOptions.line）
- area
- arearange
- areaspline
- areasplinerange
- bar
- series
  - allowPointSelect boolean 鼠标点击时允许选择series' points
  - animation 动画效果可以选择duration easing 等（有点像PowerPoint的动画效果）
  - borderColor color 设置矩形横矩形边框的颜色
  - borderRadius number 矩形边角圆滑度数值越大越圆滑
  - borderWidth
  - color
  - colorByPoint boolean 从options.colors获取颜色（能让您的图形的颜色很华丽：）
  - enableMouseTracking boolean 是否支持鼠标覆盖显示默认 true
  - groupPadding number 矩形的粗细默认 0.2
  - id event 通过chart.get（id）拿到对应series的name
  - minPointLength number 如果您数据差太大很可能最小的数据矩形会被忽略该属性可以设置一个原始高度使最小矩形不至于看不到
  - pointStart Number 设置 “点” 开始位置
  - pointInterval number 点间距
  - pointWidth number column or bar.的宽度
  - showCheckbox Boolean 是否在legend box上显示复选框
- columnrange
- gauge
- line
- pie
- scatter
- column
- spline
series
- zIndex number 同CSS中的zIndex 在相互叠加的区域值高的覆盖值低的
- data 显示在图表中的数据列，可以为数组或者JSON格式的数据。如：data:[0, 5, 3, 5]，或data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]
  - color 可以为某个矩形图或某条线形图单独设定你想要的颜色
  - dataLabels CSSObject 单独为某个点制定样式
- mark (对线形图有效)
  - enabled Boolean 是否显示线形图中的点
  - fillColor Color 线形图中点的颜色
  - lineWidth number 线形图中点边线的宽度默认 0
  - radius number 线形图中点的半径默认 0
  - symbol 用图片代替线形图中点的位置
```
 marker: {
                symbol: 'url(http://highcharts.com/demo/gfx/sun.png)'
            }
```
- name String 显示数据列的名称
- stack number 当 stacking:'normal'时为柱状图分组
```
series: [
        // first stack
        {
            data: [29.9, 71.5, 106.4, 129.2, 144.0],
            stack: 0
        }, {
            data: [30, 176.0, 135.6, 148.5, 216.4],
            stack: 0},
        // second stack
        {
            data: [106.4, 129.2, 144.0, 29.9, 71.5],
            stack: 1
        }, {
            data: [148.5, 216.4, 30, 176.0, 135.6],
            stack: 1
        }]
```
  （4组数据 stack相同的叠加到同一柱形不同颜色显示有特殊需求的可参见这里）
- type 数据列类型，支持 area, areaspline, bar, column, line, pie, scatter or splin
title 主标题样式
- text String 标题文本内容默认 Char ttitle
- enable Boolean 是否显示标题默认 true
- align String 水平对齐方式默认 center
- verticalAlign String 垂直对齐方式默认 top
- margin Number 标题与副标题之间或者主图表区间的间距默认 15
- floating Boolean 是否浮动，如果为true，则标题可以偏离主图表区，可配合x,y属性使用默认false
- style CSSObject 设置CSS样式如： {color:'#3E576F',fontSize: '16px'}
subtitle 副标题样式属性同上
（副标题的text选项默认为''，即空的，所以默认情况下副标题不显示。）
tooltip 提示框设置
- enabled Boolean 是否显示提示框
- backgroundColor String 设置提示框的背景色
- borderColor String 提示框边框颜色，默认自动匹配数据列的颜色
- borderRadius Number 提示框圆角度
- shadow Boolean 是否显示提示框阴影默认 true
- style CSSObject 设置提示框内容样式，如字体颜色等
- formatter 回调函数，用于格式化输出提示框的显示内容。返回的内容支持html标签如：, ,, , , 
- valuePrefix String 为你的value值加上前缀（有特殊要求时有用如在数字前加‘$’ 等）
- valueSuffix String 为你的value值加上后缀

xAxis
- categories String[] 设置X轴分类名称，数组，例如：categories: ['Apples', 'Bananas', 'Oranges']
- title X轴名称，支持text、enabled、align、rotation、style等属性
- labels Array 设置X轴各分类名称的样式style，格式formatter，角度rotation等
- max Number X轴最大值(categories为空时)，如果为null，则最大值会根据X轴数据自动匹配一个最大值.
- min number X轴最小值(categories为空时)，如果为null，则最小值会根据X轴数据自动匹配一个最小值。
- gridLineColor color 网格（竖线）颜色
- gridLineWidth number 网格(竖线)宽度默认 1
- lineColor color 基线颜色
- lineWidth Number 基线宽度默认 0

yAxis 属性基本与xAxis相同

formatter 格式化Y轴值（在value后面加“%”）

yAxis: {
                        min: 0,
                        max:60,
                        labels: {
                            formatter: function() {
                                return this.value +'%';
                            },
                            style: {
                                color: '#89A54E'
                            }
                        },

navigation 打印与导出小图标样式设置
});

以上这些是本人在实际应用中用到的或者觉得将来可能会用到的属性更多属性可以查询官方API 。

希望对大家有帮助

参考文献：http://api.highcharts.com/highcharts
http://www.cnblogs.com/chenzhongzheng/archive/2012/02/28/2371589.html

乔巴大大

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
highcharts 中文API

highcharts 是一个用纯JavaScript编写的一个图表库，能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习。它可以帮您完成复杂的表格类图形（线性，矩形，饼状，以及它们的组合类型），动态图，它甚至还能帮你绘制出一个构造精细的挂钟，车速表，电平表等等而您只需要去官网下载免费的highCharts.js 然后复制到您工程的相关路径
复制链接

扫一扫