HighCharts(折线图) 学习笔记
HighCharts(折线图) 学习笔记
1.highcharts如果没有指明type类型的话,默认是
chart: {
type: 'line'
},
2.Title为图标的标题,格式:
title: {
text: 'test'
},
还有一个subtitle为子标题,格式相同
3.xAxis设置的是图表中x轴的相关属性(可以设置title)
其中categories为设置x轴的相关值用数组设置,格式:
xAxis: {
title:{
text:'cuiasbiuas'
},
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
4.yAxis设置的是图表中y轴的相关属性(可以设置title)
但是好像不能设置categories,试过,但是没有成功,貌似是自动依据x轴上面的最大值进行增长,但是其中有plotLines属性,用于设置y轴上面的线的相关属性,格式:
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
5.Legend属性对图表中数据进行解释的配置,格式:
legend:{
layout:"vertical", // 设置解释信息横向还是纵向(vertical)排列
borderWidth:1, // 设置解释信息外围的边框宽度
align:"right", // 设置解释信息大体位置
verticalAlign:"middle" // 设置解释信息的具体位置
},
如果没有对legend进行设置,则默认在图表下方居中横向排列显示
6.plotOptions属性对图表中具体数据的相关设置,格式
plotOptions: {
line: {
dataLabels: {
enabled: true
// 设置为true时,图表中的点会显示具体数值,默认为false
},
enableMouseTracking: true
// 设置为true时,当鼠标移动到相关数据时会有相关提示,默认为true
}
},
7.对列表进行赋值,格式
series: [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 36.5, 23.3, 18.3, 13.9, 9.6]
}, {
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
8.用法:
a) Html页面中定义div 必须有相关属性让highcharts能够定位到
b) Js代码中$(‘html中的标识’).highcharts({
对highcharts进行相关设置
.
.
.
})
9.Tooltip 数据提示框,当鼠标移动到相关数据时,弹出的提示信息样式,格式:
tooltip: {
enabled: false, // 设置是否显示数据提示框,默认为显示
formatter: function() {// 格式化数据提示框
return '<b>'+ this.series.name +'</b><br/>'+this.x +': '+ this.y +'°C';
// 返回数据提示框中的信息
}
},
a) 提示框的相关属性
Tooltip:{
backgroundColor:’color’, // 背景颜色
borderColor:’color’, // 边框颜色
borderRadius:10, // 边框圆角
borderWidth:3, // 边框宽度
shadow:true, // 是否显示阴影
animation:true // 是否启用动画效果
style:{ // 文字内容相关格式
color: “color”,
fontSize:”size”,
fontWeight:”blod”,
fontFamily:”fvbasjnakscvnka”
}
}
b) 图示
