HighCharts 详细使用及API文档说明

时间:2022-06-19 05:20:27

一、HighCharts开发说明

HighCharts开发实际上配置HighCharts每个部分,比如配置标题(title),副标题(subtitle)等,其中每个部分又有更细的参数配置,比如标题下有对齐方式(align),标题文字(text)等。下图为整个图表的每个部分位置说明(请对照下面HighCharts整体结构)

二、HighCharts整体结构

通过查看API文档我们知道HighCharts结构如下:(API文档在文章后面提供下载)

var chart = new Highcharts.Chart({

chart: {…}              // 配置chart图表区

colors: [{...}]    // 配置主体显示颜色(多个线条和柱体的颜色顺序的)

credits: {…}     // 配置右下角版权链接

exporting: {…}  // 配置导出及打印

global: {…}      // Highcharts.SetOptions方法调用

labels: {…}        // HTML标签,可以放置在绘图的任何位置

lang: {…}        // 语言对象属性配置

legend: {…}         // 配置图例选项

loading: {…}    // 配置图表加载选项

navigation: {…} // 配置导出按钮属性

pane: {…}        // 仅适用于极性图表和角仪表

plotOptions: {…}          // 配置数据点选项

series: [{...}]               // 配置数据列选项

subtitle: {…}   // 配置副标题

title: {…}                  // 配置标题

tooltip: {…}               // 配置数据点提示框

xAxis: {…}              // 配置x轴选项

yAxis: {…}              // 配置y轴选项

})

上面红色部分是图标完整性及美观必须自己配置的选项,其他选项无特殊需要默认就行,也就是不用配置,所以开发HighCharts是不是很简单,只需要配置简单的几个选项就行,下面详细讲解每个选项的配置。

三、HighCharts每部分详细配置

1、chart :图表区选项

主要设置图表的类型,图表装载容器名,背景,高度,宽度等图表的整体属性。

参数   描述   默认值  
backgroundColor   设置图表区背景色   #FFFFFF  
borderWidth   设置图表边框宽度   0  
borderRadius   设置图表边框圆角角度   5  
renderTo   图表放置的容器,一般在html中放置一个DIV,获取DIV的id属性值   null  
defaultSeriesType   默认图表类型line, spline, area, areaspline,
column, bar, pie , scatter
  0  
width   图表宽度,默认根据图表容器自适应宽度   null  
height   图表高度,默认根据图表容器自适应高度   null  
margin   设置图表与其他元素之间的间距,数组,如[0,0,0,0]   [null]  
plotBackgroundColor   主图表区背景色,即X轴与Y轴围成的区域的背景色   null  
plotBorderColor   主图表区边框的颜色,即X轴与Y轴围成的区域的边框颜色   null  
plotBorderWidth   主图表区边框的宽度   0  
shadow   是否设置阴影,需要设置背景色backgroundColor   false  
reflow   是否自使用图表区域高度和宽度,如果没有设置width和height时,会自适应大小   true  
zoomType   拖动鼠标进行缩放,沿x轴或y轴进行缩放,可以设置为:‘x’,‘y’,‘xy’    
events   事件回调,支持addSeries方法,click方法,load方法,selection方法等的回调函数      

2、colors :数据列颜色选项