$("#container").highcharts({
chart : {
// 图表背景颜色配置
backgroundColor: '#FCFFC5',
// 图表背景渐变颜色
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 200, 255)']
]
},
// chart边框圆角
borderRadius : numer, // 值类型 1,5,10....
borderWidth : number, // 值类型 1,5,10....
colorCount : 10, // number 默认10 一般取默认值即可
type : 'line', //string 图表类型 默认取 line
height : number, // 图表高度 数字
ignoreHiddenSeries :bool, // false/true 隐藏数据列,缩放显示
inverted : false, // 反转坐标值 x轴跟y轴调换
margin : [null], // 默认null,表示图表区域和绘图区域的边距
// 设定鼠标平移按键
panning: true,
panKey : 'shift',
// 绘图区域样式调整
plotBackgroundColor : 'red', // #xxxxxx 绘图区域背景颜色
plotBackgroundColor: {// #xxxxxx 绘图区域背景渐变颜色
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(200, 200, 255)']
]
}
plotBackgroundImage : 'xxx.jpg' // url地址 绘图区域背景图片
plotBorderColor : 'red' // 绘图区域边框颜色
plotBorderWidth : number //1,5,10 绘图区域边框宽度
reflow : true // 默认true 让图表自适应图表容器
zoomType : 'x' //x/y 图表选中缩放方式
// 图表缩放按钮的位置 reset zoom
resetZoomButton : {
position : {
align : 'right', // 默认 right
verticalAlign : 'top' // 默认top
},
relativeTo : 'plot' // 按钮的位置相对于绘图区还是整个图表,默认plot/chart
},
// 图表3d形状
options3d : {
enabled : true, // 开启3d效果
alpha : 30, // 默认0 内旋转
beta : 10, // 默认0 外旋转
depth : 100, // 默认100 深度
fitToPlot : true // 自适应图绘区 false不自适应
frame: {} // 背景颜色大小控制
}
// chart 事件触发
events : {
// 添加数据列触发
addSeries : function(e) {
},
// 打印chart前触发
beforePrint : function() {
},
// 打印chart之后触发
afterPrint : function() {
},
// 点击数据列触发, 异步加载数据 下钻
drilldown : function(e) {
},
// chart加载完毕触发
load : function () {
},
// (在 load 事件之后执行)后及每次图表重绘后后触发
render : function () {
},
// 鼠标选中图表事件 必须先设置zoomType的值(x, y)
selection : function(e) {
}
}
}
});
// 动态修改坐标值
$('#update').click(function () {
var chart = $('#container').highcharts();
chart.series[0].data[0].update(i % 2 ? 200 : 0);
});
highcharts报表开发 一:chart配置
最新推荐文章于 2021-07-21 15:26:19 发布