Highcharts 各类图表展示
1、 正常曲线图
chartOptions: {
chart: {
zoomType: "x", // x轴可伸缩
height: 268
},
xAxis: {
type: "datetime", // 以日期格式展示
showLastLabel: true,
lineColor: '#F8F8F8',
tickColor: '#F8F8F8',
plotBands: {
// 标示区
from: 1399305600000,
to: 1395072000000,
color: "rgba(47, 183, 0, .2)",
zIndex: 5
},
// min: start_date,
// max: end_date,
// breaks: [{ // 使中间断掉的部分不出现缝隙
// from: ,
// to: ,
// breakSize: 0 // 不断 连上
// }],
},
yAxis: {
title: {
text: "" // 设置text为空才不显示y轴title
},
gridLineColor: '#F8F8F8',
labels: {
// format: "{value:,.2f}" // 保留两位小数
formatter: function() { // 百分比显示
return `${(this.value * 100).toFixed(2)}%`;
}
}
},
series: [
{
type: "area", // 数据展示为区域
fillColor: { // 数据列填充色,下面的为渐变色
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, "#D0DDF8"],
[1, "#fff"]
]
},
name: "***",
color: "#0065AA",
data: [],
showInLegend: false // 不在图例中展示该项
},{
name: "创建",
color: "rgba(0,0,0,0)",
data: [
[1374422400000, 0.8650571646865418]
],
marker: {
fillColor: '#FFB24B',
enabled: true,
symbol: "circle",
radius: 4
} // 设置数据点的样式,也可以让图例中该项以圆形展示
},{
type: "boxplot", // 这个type就可以让图例为圆形
name: "****",
data: []
},{
type: "line",
name: "****",
dashStyle: "Dash", // 数据线以虚线形式展示
data: []
}
],
annotations: [{ // 标注 可以在某个数据点上标注具体信息
labelOptions: {
borderColor: '#FFB24B',
backgroundColor: '#FFB24B',
padding: 4,
borderRadius: 6,
style: {
color: '#fff'
},
y: -13
},
labels: [{
point: {
xAxis: 0,
yAxis: 0,
x: 1374422400000,
y: 0.8650571646865418
},
text: '创建'
}]
}],
title: {
text: ""
},
loading: {
// 加载中选项配置
labelStyle: {
color: "#5EABF2",
fontSize: "12px"
}
},
boost: {
// 性能提升模块
useGPUTranslations: true,
usePreAllocated: true
},
credits: {
enabled: false //不显示LOGO
},
noData: {
style: {
fontSize: "15px",
color: "#303030"
}
},
legend: {
enabled: false // 禁用图例
},
tooltip: { // 提示框相关配置
shared: true,
crosshairs: true, // 瞄准线
valueDecimals: 4, // 保留4位小数
split: true, // 分区显示
pointFormatter() { // 百分位显示 自定义展示
return `<span style="color:${this.series.color}">\u25CF</span> ${this.series.name}: <b>${(this.y * 100).toFixed(2)}%</b><br/>`;
},
xDateFormat: "%Y-%m-%d %H:%M", // 设置时间显示格式
},
plotOptions: {
series: {
animation: false, // 动画加载
lineWidth: 1, // 线条宽度
marker: {
enabled: false,
radius: 1
},
events: {
legendItemClick: function(e) {
return false; // 直接 return false 即可禁用图例点击事件
}
}
},
line: {
dataLabels: {
// 开启数据标签
enabled: true
},
// 关闭鼠标跟踪,对应的提示框、点击事件会失效
enableMouseTracking: false
}
},
}
dashStyle: “Dash” 虚线展示
type: “boxplot” 该类型图例为圆形
2、饼状图
略
3、柱状图
做过的就是坐标轴title的位置
chartOptions: {
yAxis: { // 自定义y轴标题位置
title: {
text: "净资产<br>(亿元)",
align: "low",
rotation: 0,
offset: -25,
x: -60,
y: 20
},
labels: {
format: "{value:,.2f}"
}
},
}
4、雷达图
chartOptions: {
chart: {
width: 320,
height: 320,
polar: true // 代表为雷达图
},
pane: {
size: "60%" // 可以设置内部图表的大小
},
xAxis: {
categories: ['哈哈','嘻嘻','呵呵','呼呼'], // 雷达图数据列
tickmarkPlacement: "on",
gridLineColor: "#EEEEEE",
lineWidth: 0,
labels: {
formatter: function() { // 自定义文字内容
return `${this.value}能力<br/>${_this.radarData[this.value]}分`
},
style: { // 自定义label字体样式
color: '#4D4D4D',
fontSize: '14px',
fontFamily: 'Lato-BoldItalic',
textAlign: 'center'
}
}
},
yAxis: {
labels: {
enabled: false
},
gridLineColor: "#EEEEEE",
gridLineInterpolation: "polygon", // 必须
min: 0, // 定义最小值
max: 100 // 定义最大值Ï
},
series: [{
name: "综合评分",
type: "area",
data: [80, 90, 60, 98],
pointPlacement: "on",
color: { // 颜色填充,此为渐变色
linearGradient: {
x1: 0,
x2: 0,
y1: 0,
y2: 1
},
stops: [
[0, 'rgba(166, 234, 255, 0.37)'],
[1, 'rgba(166, 234, 255, 0.37)']
]
},
marker: {
fillColor: 'rgba(0, 195, 255, .5)',
lineColor: 'rgba(0, 195, 255, .5)'
}
}],
tooltip: {
formatter: function() { // 自定义提示框展示内容
return '该基金经理能力' + this.x + '为' + (this.y);
}
},
}
5、九宫格?heatmap(不知道叫什么图)
chartOptions: {
chart: {
type: "heatmap",
height: 200,
width: 200
},
title: {
text: null
},
xAxis: {
categories: ["价值型", "平衡型", "成长型"]
},
yAxis: {
categories: ["小盘", "中盘", "大盘"],
title: null
},
colorAxis: {
minColor: "#FFFFFF",
maxColor: "#46BBDE"
},
series: [{
borderWidth: 1,
borderColor: "#46BBDE",
data: [[0, 0, 0],[0, 1, 0],[0, 2, 0],[1, 0, 0],[1, 1, 0],[1, 2, 1],[2, 0, 0],[2, 1, 0],[2, 2, 0]]
}],
plotOptions: {
heatmap: {
states: {
hover: {
enabled: false // 不可点击
}
}
}
},
}
等等等等 很多未用到的…
附上highcharts官网链接,仔细研究,什么都会有的