本文主要是介绍Highchart学习笔记，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
最近由于工作需要，对highchart有个简单的学习，主要参照官网api，下面为自己涉及到的一些内容总结，附带js源码，特此分享出来，希望对大家有帮助！
涉及内容：
隐藏水印标签
自定义线条数组
使用labels标签
图例隐藏及位置改变
基准线的设定
坐标轴刻度线的隐藏
设置坐标线的宽度
将图片作为特殊点的图标
function SCAssessment() {
$('#SCAssessment').highcharts({
chart: {
type: 'line'
},
title: {
text: '我的highchart'
},
credits: {
enabled: false //隐藏水印标签
},
//线条颜色数组，依次向后取值
colors: ['#058DC7', '#ED7D31', '#50B432', '#ED561B', '#DDDF00','#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
labels: {
style: {
//color: '#FF3C3C'
},
items: [{
html: '<span style="color:#FF3C3C">-----</span> 基准时刻线',
style: {
left: '350px',
top: '-50px',
//color: '#FF3C3C',
fontSize: '13px',
fontFamily: '微软雅黑'
}
}, {
html: '<spanstyle="font-size:large;color:#59CC8D">◇</span> 基准值',
style: {
left: '367px',
top: '-30px',
//color: '#006cee',
//color: '#59CC8D',
fontSize: '13px',
fontFamily: '微软雅黑'
}
}]
},
legend: {
enabled: false,//隐藏图例
floating: true,
align: "right",
verticalAlign: 'top',
layout: "vertical",
labelFormatter: function () {
return '----- 基准线';
}
},
xAxis: {
categories: ['2015年1月', '2015年2月', '2015年3月', '2015年4月'],
plotLines: [{ //一条延伸到整个绘图区的线，标志着轴中一个特定值。
color: 'RGB(255,60,60)',
dashStyle: 'Dash',//Dash,Dot,Solid,默认Solid
width: 1, //线条粗细
value: 0, //x轴显示位置，一个标记为1，第一个点的位置为0
zIndex: 2 //优先级，数值越到，越浮在上面
}],
tickWidth: 0 //隐藏x轴刻度线
},
yAxis: {
title: {
text: '单位：万元'
},
gridLineWidth: 2, //设置y轴线条粗细
tickPositions: [0, 20, 40, 60, 80, 100, 120, 140]
},
tooltip: {
enabled: false,
formatter: function () {
return '<b>' +this.series.name + '</b><br/>' + this.x + ': ' + this.y + '°C';
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: false
}
},
series: [{
name: 'London',
data: [{
y: 120,
marker: {
symbol:'url(image/yellow.JPG)' //将图片作为点的图标
}
} , 70, 50, 45]
}, {
name: 'Tokyo',
data: [120, 90, 70, 60]
}]
});
}
这篇关于Highchart学习笔记的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
