HighCharts使用文档小结及中文帮助文档Word下载.docx
- 文档编号:18778426
- 上传时间:2023-01-01
- 格式:DOCX
- 页数:17
- 大小:79.40KB
HighCharts使用文档小结及中文帮助文档Word下载.docx
《HighCharts使用文档小结及中文帮助文档Word下载.docx》由会员分享,可在线阅读,更多相关《HighCharts使用文档小结及中文帮助文档Word下载.docx(17页珍藏版)》请在冰豆网上搜索。
+vDate.getDate();
}//定义x轴上数据显示格式(此处以日期格式为例)
align:
center'
//显示位置
allowDecimals:
true//轴上的刻度是否允许使用小数默认值为true
如果使用到其它属性可参照以下信息
Highcharts翻译系列之十七:
xAxisx轴的样式
(一)
Highcharts翻译系列之十八:
x轴样式
(二)
yAxisy轴的样式
Y轴选项与上述xAxis选项基本一致,请参照上面xAxisx轴的样式
Exporting导出
exporting:
enabled:
true
},//隐藏打印按钮
(右上角,默认为true)
Credits名片
credits:
false
},//Credits名片
(右下角,默认为true。
)
plotOptions数据点选项
plotOptions:
{//此处主要是以柱状图为例
column:
dataLabels:
true,//是否显示
{//字体样式
fontWeight:
bold'
function(){//显示信息的内容和格式(此处可以做超链接)
returnthis.y+'
人'
;
}
Highcharts翻译系列九:
PlotOptions之area区域图
Legend:
图例选项
legend:
layout:
vertical'
verticalAlign:
top'
x:
-10,
y:
100,
borderWidth:
0
},//图例样式
Highcharts翻译系列六:
legend图例选项
Color颜色选项
此处请参照HighCharts中文帮助文档
Title:
标题选项
tooltip:
function(){//在此处可以自定义提示信息显示的样式
return'
<
b>
'
+this.x.toLowerCase()+'
:
+this.y+'
人<
/b>
;
Highcharts翻译系列之十六:
tooltip工具提示
Lang语言选项(英译汉)
lang:
{
printChart:
打印图表'
downloadPNG:
下载JPEG图片'
downloadJPEG:
下载JPEG文档'
downloadPDF:
下载PDF图片'
downloadSVG:
下载SVG矢量图'
contextButtonTitle:
下载图片'
HighStock顶部按钮和时间格式汉化
(Zoom,From,Tohighstock.js---308行)
rangeSelector:
{
buttons:
[{//定义一组buttons,下标从0开始
week'
count:
1,
1周'
},{
month'
1月'
},{
3,
3月'
6,
6月'
ytd'
1季度'
year'
1年'
all'
全部'
}],
buttonTheme:
width:
36,
height:
16,
padding:
1,
r:
0,
stroke:
#68A'
zIndex:
7
},
inputDateFormat:
%Y-%m-%d'
inputEditDateFormat:
selected:
1//表示以上定义button的index,从0开始
语言对象。
语言对象是全局的,而且不能在图表初始化的时候设置。
它必须使用Highcharts.setOptions在图表初始化之间设置
Highcharts.setOptions({
global:
useUTC:
false
lang:
months:
['
Janvier'
Fevrier'
Mars'
Avril'
Mai'
Juin'
Juillet'
Aoû
t'
'
Septembre'
Octobre'
Novembre'
Decembre'
],
weekdays:
Sunday'
Monday'
Tuesday'
Wednesday'
Thursday'
Friday'
Saturday'
]
});
汉化后:
['
一月'
二月'
三月'
四月'
五月'
六月'
七月'
八月'
九月'
十月'
十一月'
十二月'
星期日'
星期一'
星期二'
星期三'
星期四'
星期五'
星期六'
其他汉化信息科参照
highcharts页面导出按钮汉化
Column,lineandpie三图组合
function(){
vars;
if(this.point.name){//当为饼状图时
s='
+
this.point.name+'
:
<
br/>
总户数'
+this.y+'
户'
}else{
+this.series.name+'
('
+this.x+'
):
+this.y+'
户’;
returns;
positioner:
null
size:
120,//Pie大小
allowPointSelect:
true,//扇区是否可以点击
cursor:
pointer'
//鼠标的样式
showInLegend:
false,//图例
dataLabels:
false//是否显示信息
Highcharts中文帮助文档
Chart图标区选项
Chart图表区选项用于设置图表区相关属性。
参数
描述
默认值
backgroundColor
设置图表区背景色
#FFFFFF
borderWidth
设置图表边框宽度
borderRadius
设置图表边框圆角角度
5
renderTo
图表放置的容器,一般在html中放置一个DIV,获取DIV的id属性值
defaultSeriesType
默认图表类型line,spline,area,areaspline,column,bar,pie,scatter
width
图表宽度,默认根据图表容器自适应宽度
height
图表高度,默认根据图表容器自适应高度
margin
设置图表与其他元素之间的间距,数组,如[0,0,0,0]
[null]
plotBackgroundColor
主图表区背景色,即X轴与Y轴围成的区域的背景色
plotBorderColor
主图表区边框的颜色,即X轴与Y轴围成的区域的边框颜色
plotBorderWidth
主图表区边框的宽度
shadow
是否设置阴影,需要设置背景色backgroundColor。
reflow
是否自使用图表区域高度和宽度,如果没有设置width和height时,会自适应大小。
zoomType
拖动鼠标进行缩放,沿x轴或y轴进行缩放,可以设置为:
x'
y'
xy'
events
事件回调,支持addSeries方法,click方法,load方法,selection方法等的回调函数。
Color颜色选项用于设置图表的颜色方案。
color
用于展示图表,折线/柱状/饼状等图的颜色,数组形式。
array
Highcharts已经默认提供了多种颜色方案,当要显示的图形多于颜色种类时,多出的图形会自动从第一种颜色方案开始选取。
自定义颜色方案的方法:
Highcharts.setOptions({
colors:
#058DC7'
#50B432'
#ED561B'
#DDDF00'
#24CBE5'
#64E572'
#FF9655'
#FFF263'
#6AF9C4'
]
});
enabled
是否启用名片
True
href
点击名片跳转的链接
position
设置名片的位置
position:
bottom'
-5
}
style
设置名片的样式
text
设置名片显示的值
"
H"
exporting导出
是否显示导出打印的按钮
url
设置点击导出按钮连接的地址,默认是官网的地址,可自己定义
filename
保存的文件名
chart
type
保存的文件类型
Image/png
buttons
设置导出或打印按钮的样式、事件等具体配置请看官网
宽度
800
enableImages
是否启用图像的出口。
包括图像的点标记,背景图片等,默认为false。
应该是是否添加背景图
Global全局设置
(Google翻译的)
全球设置并不适用于每个图表的选项。
像lang选项,这些选项,必须设置使用Highcharts.setOptions方法。
canvasToolsURL
设置延迟加载的Android2.x设备的附加文件的URL。
这些设备不支持SVG,所以需要下载一个帮助文件,其中包含canvg,的依赖关系rbcolor,和CanVGRenderer类。
可以自己安装canvas-tools.js到自己的服务器上,相应地更改此选项。
默认值的“
useUTC
是否使用UTC时间,为轴缩放,刻度标记的位置和时间在Highcharts.dateFormat显示。
Title标题选项用于设置图表的标题相关属性。
标题文本内容。
Charttitle
align
水平对齐方式。
center
verticalAlign
垂直对齐方式。
top
标题与副标题之间或者主图表区间的间距。
15
floating
是否浮动,如果为true,则标题可以偏离主图表区,可配合x,y属性使用。
设置CSS样式。
{color:
#3E576F'
fontSize:
16px'
Subtitle:
副标题选项
副标题提供的属性选项与标题title大致相同,可参照上述标题选项,值得一提的是副标题的text选项默认为'
,即空的,所以默认情况下副标题不显示。
xAxis:
X轴选项
X轴选项用于设置图表X轴相关属性。
categories
设置X轴分类名称,数组,例如:
categories:
[]
title
X轴名称,支持text、enabled、align、rotation、style等属性
labels
设置X轴各分类名称的样式style,格式formatter,角度rotation等。
max
X轴最大值(categories为空时),如果为null,则最大值会根据X轴数据自动匹配一个最大值。
min
X轴最小值(categories为空时),如果为null,则最小值会根据X轴数据自动匹配一个最小值。
gridLineColor
网格(竖线)颜色
#C0C0C0
gridLineWidth
网格(竖线)宽度
1
lineColor
基线颜色
#C0D0E0
lineWidth
基线宽度
yAxis:
Y轴选项
Y轴选项与上述xAxis选项基本一致,请参照上表中的参数设置,不再单独列出。
Series:
数据列选项
数据列选项用于设置图表中要展示的数据相关的属性。
data
显示在图表中的数据列,可以为数组或者JSON格式的数据。
如:
data:
[0,5,3,5],或
[{name:
Point1'
y:
0},{name:
Point2'
5}]
如果想对不同的列显示不同的颜色请对该列使用color属性,如data:
[148.5,
{
y:
216.4,color:
#BF0B23'
},54.4]
name
显示数据列的名称。
数据列类型,支持area,areaspline,bar,column,line,pie,scatterorspline
line
plotOptions:
数据点选项
plotOptions用于设置图表中的数据点相关属性。
plotOptions根据各种图表类型,其属性设置略微有些差异,以下是部分选项。
enableMouseTracking
启用或禁用鼠标跟踪一个特定的列。
这包括点提示和图上点的单击事件。
对于大型数据集,它可以提高性能。
如果这个禁用了event事件将无法执行
可以设置对整个图形的click事件、单击图例显示和隐藏图形,还有mouseOut、mouseOver等。
具体详细信息请看官网
point
每个单点的属性,该属性下面可以这个单个点的click、mouseOut、mouseOver、remove、select(选中是触发)、unselect(失去选中时触发),update(对某个点更新时触发)
zIndex
设置图形的zIndex值,值相对大的显示在顶层
pointPadding
设置每列之间填充的大小,只对column和bar有效。
pointWidth
设置每列之间一个固定的宽度,只对column和bar有效。
Tooltip:
数据点提示框
Tooltip用于设置当鼠标滑向数据点时显示的提示框信息。
是否显示提示框
设置提示框的背景色
rgba(255,255,255,.85)
borderColor
提示框边框颜色,默认自动匹配数据列的颜色
auto
提示框圆角度
是否显示提示框阴影
设置提示框内容样式,如字体颜色等
color:
#333'
formatter
回调函数,用于格式化输出提示框的显示内容。
返回的内容支持html标签如:
<
strong>
i>
em>
span>
2
legend用于设置图例相关属性。
layout
显示形式,支持水平horizontal和垂直vertical
horizontal
对齐方式。
图例背景色。
图例边框颜色。
#909090
图例边框角度
是否显示图例
是否可以浮动,配合x,y属性。
是否显示阴影
设置图例内容样式
Navigation按钮和图例选项
buttonOptions
设置导出,打印按钮的选项,如显示的位置,样式,是否启用等
menuItemHoverStyle
悬停在图例上面的样式
menuItemStyle
mentStyle
Loading
在图形上显示一个loading文字,可能是用于增加用户体验
hideDuration
设置loading标签淡出的时间
100
showDuration
设置loading标签淡入的时间
labelStyle
Loading标签样式
loading标签的样式,涵盖了绘图区
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HighCharts 使用 文档 小结 中文 帮助