场景:x轴数据过多,出现滚动条
- 引入stock文件
import Highcharts from "highcharts";
import highstock from 'highcharts/modules/stock'
highstock(Highcharts);
- 设置滚动条属性
new Highcharts.Chart({
xAxis: {
max:30,// x轴多于30个出现滚动条
},
scrollbar:{// 设置滚动条样式
enabled: true,
height: 8,
barBackgroundColor: "#d1d1d1",
barBorderColor: "#d1d1d1",
rifleColor: "#d1d1d1",
barBorderRadius: 5,
buttonBorderWidth: 0,
buttonArrowColor: "rgba(0,0,0,0)",
}
})
- x轴label文案过长时,倾斜比出现省略号
chart: {
marginBottom:100,// 底边距
marginRight:100,// 右边距
},
xAxis: {
max: 30,
labels: {
autoRotationLimit: 100,// 设置倾斜的点
autoRotation: [45], // 向右倾斜45度,默认为[-45]
}
},
marginBottom:图表的下边距,默认为100,需要根据图表的高度设置合适的值,否则有可能会出现文字未省略,直接被截断的情况,如下图:
Xnip2021-09-16_15-38-57.jpg
marginRight:图表的右边距,默认为100,如果右倾斜,也可能会出现文字被截断,见下图:需要根据业务需求动态设置该值
Xnip2021-09-16_15-48-22.jpg
左倾斜可以避免上述情况:
Xnip2021-09-16_15-51-36.jpg
- 滚动时,y轴自动适配,为了更直观的展示数据,highCharts会根据当前显示在页面上的数据,自动调整y轴刻度,如果不希望自适应,可以设置y轴的最大最小值:
yAxis: {
min : Math.min(...dataLists.map(o => o.y)),// 数据的最小值
max : Math.max(...dataLists.map(o => o.y)),// 数据的最大值
}
适用场景:图表有最大、最小值标示线,页面滚动可能会导致标示线丢失
网友评论