PS:因為在工作中經常會用的這個插件,所以做個日常歸納方便自己查閱,也幫助大家更快速的解決關於這個插件的各種問題和需要的樣式,希望也能幫助大家,謝謝,如有雷同純屬巧合。
這個圖是截取官網的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>
要增加备注的话,需要添加新属性了:
改之前:
改之后:(多贴一点代码好理解,嘻嘻嘻)
PS:主要的添加了下面红色标注的代码,加他们就可以了,需要那个加那个,效果在下面图片上。
hart = Highcharts.chart('container', {
title: {
text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
},
labels: { //在图表上显示文本
items: [{
html: 'Hello highcharts',
style: {
left: '30px',
top: '60px'
}//文本的样式
}, {//这第二行文字的top也要记得相应增加哟
html: 'https://www.highcharts.com.cn/',
style: {
left: '30px',
top: '100px'
}
}]
},
credits: { //右下角的文本
enabled: true,
position: {
align: 'right',
x: -10,
y: -10
},//位置设置
href: "https://www.highcharts.com.cn/", //点击文本时的链接
style: {
color: 'red'//文本颜色(这里也可以写需要的css,自己发挥哟)
},
text: "Hello highcharts" //显示的内容 (不要写多了,这个会挤不下哟)
},
yAxis: {
title: {
text: '就业人数'
}
},