highcharts 常用的API配置项

highCharts相关属性

引入文件

// highcharts基础js文件（必须）
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
// 其他需引入的文件
https://www.highcharts.com.cn/docs/start-download

函数写法

// 在绘图前给 Highcharts 准备一个 DOM 容器，并指定其大小
<div id="container" style="width: 600px;height:400px;"></div>
// 图表初始化函数
var chart = Highcharts.chart('container', options);
var options = {
     // 图表区选项
     chart: {
     },
     // 标题选项		
     title: {
     },
     // X轴选项
     xAxis: {
     },
     // y轴选项
     yAxis: { 
      },
     // 数据列选项
     series: [
     ]
};

1.Chart：图表区选项

Chart:{ 
	// 指定图表的类型，默认是折线图（line）
 	// 可选参数spline,scatter,splinearea,bar,pie,area,column
	type: 'line',
    // 图表的页面显示容器(也就是要显示到的div)
    renderTo: 'container',      
 	// 背景颜色
	backgroundColor: "#092A3A",
 	// 外框阴影
	shadow:true,
 	// 圆角
	borderRadius:5, 
 	// 边框宽度，边框颜色（两个配合使用）
	borderWidth:5,  borderColor:"#99091c",
 	// 让图表自适应图表容器
	reflow: true,
 	// 绘图区边框宽度
	plotBorderWidth:1,
 	// 绘图区背景色
	plotBackgroundColor:"#99091c",
 	// 绘图区背景图
	plotBackgroundImage:"./1.jpg",
 	// 绘图区边框色
	plotBorderColor:"#99091c",
    // 绘图区阴影
    plotShadow: false,         
    // 图表的宽度
    width: 1000,
 	// 图表的高度
	height: 300,
    // 图表外边缘跟绘图区域之间间距（默认4个参数，数组格式，上右下左）
    margin: [20,23,23,23],
    // 等同上边margin属性
    marginLeft: 60,   
    marginTop: 60,   
    marginRigth: 60,   
    marginBottom: 60,           
	// 置（调换x，y轴）
    inverted: false,
    // 是否在初始化的时候显示坐标轴， 仅适用于初始化时数据列为空的（动态添加数据列）图表
    showAxes: false,
    // 图表的内边距，指图表外边缘和绘图区之间的距离， 默认是：[10, 10, 15, 10]
    spacing:[10, 10, 15, 11]
    // 等同上边spacing属性 
    spacingTop: 100,            
    spacingRight: 10,
    spacingBottom: 15,
    spacingLeft: 10,
	
}

2.title：标题选项

title:{ 
	// 标题文字
    text: '月份平均温度',
    // 水平偏移量
    x: -20,
    // 垂直偏移量  
    y: 100
     // 水平方向（left, right, bottom, top）
    align: 'right',
    // 垂直方向（left, right, bottom, top）
    verticalAlign: "left"
    // 是否浮动显示(效果就是会不会显示到图中)
    floating: true,
   	// 标题和图表区之间的边距，若存在副标题，则指副标题和图表区之间的边距。 默认是：15
    margin: 15,
    //标题的css样式（例如：颜色，字体，字号）
    style: {
        
    },
    // 是否使用HTML渲染标题，默认false
    useHTML:false,
}

3.subtitle：副标题选项

subtitle:{ 
	// 标题文字
    text: '月份平均温度',
    // 水平偏移量
    x: -20,
    // 垂直偏移量  
    y: 100
    // 水平方向（left, right, bottom, top）
    align: 'right',
    // 垂直方向（left, right, bottom, top）
    verticalAlign: "left"
    // 是否浮动显示(效果就是会不会显示到图中)
    floating: true,
   	// 标题和图表区之间的边距，若存在副标题，则指副标题和图表区之间的边距。 默认是：15
    margin: 15,
    // 标题的css样式（例如：颜色，字体，字号）
    style: {
    },
    // 是否使用HTML渲染标题，默认false
    useHTML:false,
}

5.xAxis：X轴选项

xAxis:[{
    // 坐标轴类型可以是 "linear（线性轴）","logarithmic（对数轴）","datetime（时间轴),category（分类轴）"之一，
    // 在时间轴中，坐标轴值是以毫秒为单位的数字（时间戳），坐标轴标签显示的则是对应间隔（年、月、日、小时等）的格式化字符串（都可以自定义），也就是说在时间轴中，x值是时间戳，至于想要显示什么，完全可以根据需求进行格式化。
   	// 在分类坐标轴中，如果有没有指定分类 categories 数组，那么分类将使用数据列中的数据点的名字（数据点的 names 属性）。
	// 默认是：linear. 
    type: "linear"
    // x坐标轴显示的数据
    categories: ['一月', '二月'],
    // 是否允许刻度轴显示小数（默认显示）
    allowDecimals: false
    // 在图表中相隔出现纵向的颜色格栅，相邻刻度线之间会用对应的颜色来绘制颜色分辨带（隔行变色）
    alternateGridColor: 'red',
    // 事件格式化函数
    dateTimeLabelFormats: {
      millisecond: '%H:%M:%S.%L',
      second: '%H:%M:%S',
      minute: '%H:%M',
      hour: '%H:%M',
      day: '%e. %b',
      week: '%e. %b',
      month: '%b \'%y',
      year: '%Y'
	},
    //endOnTick: false,               //是否显示控制轴末端的一个cagegories出来
    //events: {
    //setExtremes:
    //},
    // x轴刻度线
  	tickWidth: 0,
    // x轴刻度线的颜色
    tickColor: 'blue',
    // x轴刻度线的间距
    tickInterval: 20,
    // x轴刻度线的长度
    tickLength: 5,
   	// 本参数只对分类轴有效,当值为 on 时刻度线将在分类上方显示；当值为 between 时，刻度线将在两个分类中间显示。当 tickInterval 为 1 时，默认是 between，其他情况默认是 on。 默认是：null 
    tickmarkPlacement: "on", 
    // x轴线之间的间距     
    tickPixelInterval: 60
	// x轴线的方向的位置（参数：outside外，inside里）  
    tickPosition: "inside",    
    // 纵向格线的颜色    
    gridLineColor: "#093144", 
    // 纵向格栅线条的类型    
    gridLineDashStyle: 'ShortDash',
    // 纵向格线的的大小    
    gridLineWidth: 1,  
	// 通过id值获取轴对象
    id: null,
    // X轴的标签（下面的说明）
    labels: {  
        // x轴刻度跟值的位置（center，left,rigth）
        align: "center",  
        // 是否显示刻度值    
        enabled: false,
        // 格式化函数
        formatter: '',
        // x轴数值的单位
        format:'{value}km',
        // 顺时针旋转x轴数值（效果就是影响标签数值的显示方向）
        rotation: 90,
        // x轴数值分行的交错显示（上、下）    
        staggerLines: 4,
        // x轴数值显示的间隔
        step: 2,
        // x轴数值的css样式
        // 使用 whiteSpace: 'nowrap' 来阻止文本换行， 
        // textOverflow: 'none' 来阻止文本过长时以省略号的形式显示。
        // 在 CSS 样式模式 中，轴标签可以通过 .highcharts-axis-labels 样式类来控制。
        style:{
            color: "#666666", 
            cursor: "default", 
            fontSize: "11px"
        },
       	// 水平偏移量
        x: 100, 
        // 垂直偏移量
        y: 40
    },
    // X轴的颜色（需要搭配lineWidth使用）
    lineColor: "red",
    // X轴的宽度   
    lineWidth: 5,  
    // 在x轴图例对应的上方额外显示刻度值（参数为1隐藏，为2展示）
    linkedTo:1,
    // 在x轴图例对应的上方额外显示刻度值（参数为false隐藏，为true展示）
    opposite: true                  //是否把标签显示到对面
	// 刻度值的最大值
    max: 12,
    // 坐标轴每个刻度之间的间距（默认值0.01）
    maxPadding: 6,
    // 2.2版本废弃
    maxZoom: 1,
    // 坐标轴每个刻度之间的间距的最小范围
    minRan0ge:10,
    // 刻度值的最小值    
    min: 10,
    // 副格线的颜色（英语本的格格）    
    minorGridLineColor: 'red', 
    // 副格线的的样式(参数有：dot（点）solid（实线）dash（虚线）blod（跟实线差不多））
    minorGridLineDashStyle: 'blod',
    // 副格线的宽度
    minorGridLineWidth: 50, 
    // 坐标轴刻度线的宽度（副格线最边上的刻度）
    minorTickColor: '#A0A0A0',
    // 副格线的每格的间距
    minorTickInterval:3,  
    // 副格线的长度    
    minorTickLength: 10,
    // 副格线刻度的位置（参数：outside外，inside里）    
    minorTickPosition: 'inside',
    // 副格线刻度的宽度    
    minorTickWidth: 5, 
    // 距离x坐标轴的最小内边距(默认0.01)    
    minPadding: 0.01,
    // 坐标轴距离绘图区的距离    
    offset: 0,
    // 使某数据块显示不同的效果    
    plotBands:[{
        // 边框颜色
        borderColor: 
        // 边框宽度
        borderWidth: 
        // 类名
        className: 
        // 样式
        color:
        // 事件
        events: 
        // 开始值
        from: 
        // 结束值
        to: 
        // 编号
        id: 
        label: {}
        // 层叠
        zIndex
	}], 
    // 标示线是用来标记坐标轴上特殊值的一条直线，在绘图区内绘制一条自定义的线。
    plotLines:[{
        // 类名
        className:,
        // 颜色
        color:"#ccc",
        // 线条样式
        dashStyle:"longdashdot", 
        // 事件
        events: ,
        // 编号
        id: 
        label: {},
        // 值
        value: ,
        // 宽度
        width: ,
        // 层叠
        zIndex: ,
    }],
    // x轴刻度值是否倒置
    reversed: true,
    // 是否显示第一个轴标签（即是在x轴第一个刻度值前空出来一个，需要搭配startOnTick使用）
    showFirstLabel: false,
    startOnTick: true,
    // 从第几周开始（参数 0-6（0为周末。以此类推））
    startOfWeek: 2,
    //x轴的标题 
    title: {                   //设置坐标标题的相关属性
        margin: 40,
        rotation: 90,
        text: "Y-values",
        align: "middle",
        enabled: "middle",
        style: {color: 'red'}
    },    
}]

6.yAxis：Y轴选项

等同x轴参数

7.Series：数据列选项

8.plotOptions：数据点选项

9.tooltip：数据点提示框

// 提示框设置
tooltip:{
    // 格式化提示框的内容样式,默认支持的 HTML 标签有:<b>,<strong>,<i>,<em>,<br/>,<span>。
    formatter: function() {  
        return '<b>'+ this.series.name +'</b><br/>'+
                this.x +': '+ this.y +'°C';
    },
    // 背景颜色
	backgroundColor: '#CCCCCC', 
    // 边框颜色
	borderColor: '#FCFFC5',
    // 边框的圆角大小
	borderRadius: 2,
    // 边框宽度(大小)
	borderWidth: 3,
    // 是否显示提示框    
	enabled: false,
    // 提示框是否应用阴影
	shadow: false,
   	// 当打开这个属性，鼠标几个某一区域的时候，如果有多条线，所有的线上的据点都会有响应
    // 当提示框被共享时，整个绘图区都将捕捉鼠标指针的移动。提示框文本显示有序数据（不包括饼图，散点图和标志图等）的系列类型将被显示在同一个提示框中
	shared: true, 
    // 没有看出明显效果
	snap: 0,
    // 交叉点是否显示的一条纵线(4.1版本已经废弃)
	crosshairs: {                 
      width: 2,
      color: 'gray',
      dashStyle: 'shortdot'
	},
    // 提示框内容的样式
	style: {  
      color: 'white',
      padding: '10px',    //内边距 (这个会常用到)
      fontSize: '9pt',            
	},
    // 数值后缀（参数为string）
    valueSuffix:'cm',
    // 数值前缀
    valuePrefix:'cm',
    // 数据提示框数据值小数保留位数,可以在每个数据列的tooltip对象中对某个数据列单独设置。默认保留所有小数。 
    valueDecimals:1,
    // 时间轴格式化(参数为时间的格式)
  	xDateFormat:'%Y-%m-%d',   
}

10.Legend：图例选项

 // 图例说明
legend: {  
    // 图例说明布局（vertical:垂直显示,horizontal：水平显示）
    layout: 'vertical', 
    // 水平对齐方式（left，center,right）
    align: 'center', 
    // 图例放置位置（top，middle，bottom）
    verticalAlign: 'top',
    // X轴偏移量,类似于margin参数 
    x: 250,  
    // y轴偏移量,类似于margin参数
    y: 0,
    // 图例边框宽度
    borderWidth: 1,
    // 图例边框颜色
    borderColor: 'red',
    // 背景颜色
    backgroundColor: 'red'
    // 图例容器的宽度
    width:100,
    // 边框圆角    
    borderRadius:5,
    // 是否显示图例说明
    enabled: false,
    // 是否浮动显示(效果就是会不会显示到图中)
    floating:true,
    // 图例说明的顺序（是否反向）
    reversed:true,
    // 鼠标点击图例参数，图例文字颜色改变的颜色
    itemHiddenStyle: {
        color: 'red'
    },
    // 鼠标悬浮图例参数，图例文字颜色改变的颜色
    itemHoverStyle: {
        color: 'red'
    }, 
    // 图例的css样式
    itemStyle:  {
        fontSize:30,
        color: 'red'
    }
    // 图例每一项的宽度
    itemWidth:100,
    // 图例文字内容
    labelFormatter: function() {
        // this指的是series对象
        return this.value
    }
    // 图例的行高，默认16（2.1版本已经废弃）
    lineHeight: 1000,
    // 给图例项盒子阴影(需要同时设定backgroundcolor属性)
    shadow:true,
    // 当为true时，图例原点的长、宽将相等。长、宽尺寸默认与图例项字体大小一致，默认是：true. 
    squareSymbol:true,
    // 图例原点与图例文字之间的间距（默认值 5）
    symbolPadding: 100,
    // 图例原点的宽度。当squareSymbol 属性设定后，此设定默认值取 symbolHeight，否则为16。 
    symbolWidth: 100                  
}

11.credits: 公司信息

redits: {
  	// 隐藏公司信息
	enabled: false
},

12.exporting: 导出信息

exporting: {
	// 隐藏导出信息
	enabled: false
},