PS:因為在工作中經常會用的這個插件,所以做個日常歸納方便自己查閱,也幫助大家更快速的解決關於這個插件的各種問題和需要的樣式,希望也能幫助大家,謝謝,如有雷同純屬巧合,慢慢完善中。
1:legend 方法總結:如圖
這個圖是截取官網的line圖:
先把源碼貼一波,希望不要被打,使用這個圖之前不要忘記引用官方js包喲,切記切記額,好了廢話不多說直接整起:
script:
var chart = Highcharts.chart('container', {
title: {
text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
},
subtitle: {
text: '数据来源:thesolarfoundation.com'
},
yAxis: {
title: {
text: '就业人数'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: '安装,实施人员',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: '工人',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: '销售',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: '项目开发',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: '其他',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
HTML:
<div id="container" style="max-width:800px;height:400px"></div>
數據值和數據點樣式修改:
修改之前:
series: [{
name: '安装,实施人员',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}]
修改之後:
series: [{
name: '安装,实施人员',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
lineWidth: '3px',//修改線的粗度
dataLabels: {
enabled: true,//顯示數據值
color: '#000',//數據值的顏色
verticalAlign: 'bottom',
style: {
fontSize: '12px'//數據值的大小,在這裡還可以設置很多樣式就不一一說明了哈
}
},
marker: {
symbol: 'circle',//數據點的樣式 'circle'實心圓圈("circle", "square"(正方形), "diamond"(菱形), "triangle"(三角形) and "triangle-down"(倒三角形) )
radius: 5//点的半径
}
}]
擴展知識:
fillColor: null, //数据点标志填充的颜色
lineColor: "#FFFFFF", //数据点标志线的颜色
lineWidth: 0, //数据点标志线的大小
symbol: 'triangle'//'url(http://highcharts.com/demo/gfx/sun.png)' //数据点标志形状(triangle三角形,或者用图片等等)
這些在工作中沒怎麼用到,到時還是總結一下。