plotLines 参考线
- yAxis中的plotLines是在y轴自定义一条线，比如现在每个刻度是5，但是4这个值是个比较特殊的，是个分割线，这时可以使用该属性定义这个线，
-
如图，下图中圈中的红色线条就是
hightchart
设置线状图的线的宽度
plotOptions: {
series: {
lineWidth:20
}
}
如下图效果
加宽线条
实现“油炸圈”图表：
- 参考链接：http://jsfiddle.net/jason_pandy/41wkq806/
- 关键属性设置：
- startAngle: -180,
- endAngle: 180,
- center: ['50%', '50%']//设置位置
注：一圈是360°，上述两个属性startAngle和endAngle只要和是360°就能出一个圈，center属性是设置位置。
如何隐藏右下角的网址
参考链接：
http://jsfiddle.net/gh/get/jquery/2/highcharts/highcharts/tree/master/samples/highcharts/credits/enabled-false/
- 关键属性：credits
图例legend的设置
- 隐藏
- 设置legend的enabled为false即可
- 设置图例样式
legend: {
layout: 'vertical',//设置图例是纵向显示
floating: true,
align: 'left',
verticalAlign: 'top',
x: 90,//定位设置
y: 60,
symbolPadding: 10,//设置图例和描述之间的距离
symbolWidth: 50//设置图例中穿过圆形的线条长度
},
如下图：
图例示意图
设置线状图的图例为圆点
如图:
圆形图例
相关代码
legend: {
layout: 'horizontal',
align: 'right',
verticalAlign: 'top',
borderWidth: 0,
symbolWidth: 0,
symbolPadding: 12,//图例图表和描述之间的距离
itemDistance: 30,//每个图例之间的距离
itemStyle: {
color:'#707070'
}
}
//……
series: [
{
name: helper.getIMsg('UAlarmLevelLabel.High'),
color: '#ee3124',
data: [],
marker: {//如果不设置marker，每个图例的形状是自动随机生成的，有圆的有方的，样式不统一
symbol: "circle",//设置图例形状
lineWidth: 3,//设置图例的大小
fillColor: '#ee3124',//图例外围的颜色
lineColor:'#ee3124'//图例中心的颜色
}
}, {
name: helper.getIMsg('UAlarmLevelLabel.Medium'),
color: '#f37021',
data: [],
marker: {
symbol: "circle",
lineWidth: 3,
fillColor: '#f37021',
lineColor:'#f37021'
}
}, {
name: helper.getIMsg('UAlarmLevelLabel.Low'),
color: '#ffc627',
data: [],
marker: {
symbol: "circle",
lineWidth: 3,
fillColor: '#ffc627',
lineColor:'#ffc627'
}
}
]
bubble chart使用记录
参考链接：https://jsfiddle.net/jason_pandy/0zf5dgzm/
- 该例子实现了以下几个功能：
- 横纵坐标自定义显示
- 纵坐标的文字纵向显示
- 设置图表颜色的透明度，可以通过rgba的方式设置
color:rgba(255,113,242,100)
设置横轴纵轴最小刻度间隔
- 设置minTickInterval属性
yAxis: {
title: {
text: ''
},
minTickInterval:1,
}
坐标上不显示小数
yAxis: {
title: {
text: ''
},
minTickInterval:1,
allowDecimals:false,
}
设置坐标轴上文字两边的竖线长度 tickLength
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tickLength: 20
},
- 效果图
tickLength:20
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tickLength: 200
},
tickLength:200
显示纵坐标刻度线和纵坐标左边的竖线
yAxis: {
min: 0,
title: {
text: ''
},
gridLineWidth:0,
lineColor：'red',
lineWidth:1,//左边的竖线
}
设置柱状图的宽度
$("#pie").highcharts({
plotOptions: {
column: {
pointWidth:20
}
}
});
柱状图上显示数字
下面的代码通过formatter来设置柱状图上显示各个成分的值，及total的值，以及为0时不显示。
yAxis: {
stackLabels: {
style: {
color: 'black'
},
enabled: true,
formatter: function () {
if(this.total==0){
return '';
}
return this.total + " mm";
}
}
},
plotOptions: {
column: {
stacking: 'normal',
pointPadding: 0,
groupPadding: 0,
dataLabels: {
enabled: true,
formatter(){
if(this.y==0){
return ''
}
return this.y;
}
}
}
}
图例的设置
legend: {
align: 'right',
verticalAlign: 'middle',
layout: 'vertical'
},
隐藏右上角的导出打印区域
exporting: {
enabled: false
}
最后附上官方网址：http://www.highcharts.com/
以后会持续更新中……