这次需求里面有一个折线图,画完,发现设置max值,但数据里面同时有多个数据为max值,连接起来得线会只显示一半,查了好久没有解决,最后再highcharts社区提问后,大佬给出了解决方案
简数社区。大家要是遇到了问题,也可以去社区看看。
可以很清晰得看到,线条得区别。最开始想得是把线条宽度调整,结果线显示效果只是同比变细了,其他方面没有区别。
下面是这次我再写得时候使用得配置,效果是一个简单得折线图。
const options = {
chart: { // 图表配置
height: 250, // 绘制区高度
zoomType: 'x', // 缩放方式,延水平缩放
resetZoomButton: { // 缩放之后会出现得按钮,允许用户重置缩放比例 这里是重置原始按钮样式
theme: {
fill: 'white',
r: 4,
style: {
color: 'rgba(0, 0, 0, 0.65)',
},
states: {
hover: {
fill: 'white',
stroke: '#008cff',
style: {
color: '#008cff',
},
},
},
},
},
},
title: null, // 图标标题
xAxis: { // x轴配置
title: null,
labels: {// 用label里边的formatter代替categories,解决原点作为起始点的问题
align: 'center', // 设置x轴坐标文字的位置,在刻度的左边
formatter() {
return categories[this.value];
},
y: 20,
style: { color: '#747A85' },
},
min: 0, // 让x刻度线 从原点开始
tickInterval: 1, // x轴的刻度步数设置为1
tickLength: 4, // 这个是刻度线得长度
startOnTick: false, // 起始与刻度线
},
yAxis: [
{
title: {
text: '',
},
tickAmount: 6, // 水平方向有多少根线。
min: 0,
gridLineDashStyle: 'Dash', // 水平线得类型, 这里是虚线
alternateGridColor: null,
max: 100,
labels: { // Y轴刻度展示文案
format: '{value} %',
style: { color: '#747A85' },
},
plotBands: [{ // 定义不同得区域颜色
from: 0,
to: 20,
color: 'rgba(49, 195, 130, 0.06)',
}, {
from: 20,
to: 40,
color: 'rgba(85, 143, 241, 0.06)',
}, {
from: 40,
to: 60,
color: 'rgba(85, 143, 241, 0.06)',
}, {
from: 60,
to: 80,
color: 'rgba(245, 67, 70, 0.06)',
}, {
from: 80,
to: 100,
color: 'rgba(245, 67, 70, 0.06)',
}],
},
],
tooltip: { // 数据提示框
enabled: true, // 是都展示,默认展示
shared: true, // 提示框被共享时,整个绘图区都将捕捉鼠标指针的移动
backgroundColor: '#fff', // 背景颜色
borderColor: '#fff', // 边框颜色
animation: true, // 是否启用动画效果
padding: 12,
useHTML: true, // 内部可以解析html标签
formatter() {
let s = `<span style="text-align:left;margin:0 auto;display:inline-block;width:100%">${categories[this.x]}</span><br/>`;
this.points.forEach((item) => {
s += `<span style="color: ${item.color};margin-right:8px;">\u25CF</span> ${item.series.name}: ${item.y}%<br/>`
})
return s;
},
style: {
fontSize: '14px',
lineHeight: '26px',
textAlign: 'left',
color: '#222833',
},
},
plotOptions: { // 数据列得配置
series: {
marker: { // 数据点 就是线上得小圆点
enabled: false,
},
},
line: {
clip: false,
},
},
series: [{// 每个数据的配置
name: '', // 曲线代表的图例
color: '#2B8AE8', // 曲线颜色
data: ballFriendTrend, // 数据值
clip: false,//允许在整个打印区域中进行系列渲染 主要就是这个属性能解决峰值线溢出不展示问题
// 注意这个属性会影响缩放功能
fillColor: { // 设置渐变的填充颜色
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1,
},
stops: [
[0, 'rgba(24,144,255,0.2)'],
[1, '#fff'],
],
},
}],
legend: { // 图例
selectedMode: false,
enabled: false,
},
credits: {
enabled: false, // 禁用版权信息
},
};