一个从官网粘贴的简单代码示例:
<div class="main">
<div id="container" style="min-width:400px;height:400px"></div>
<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
<script src="https://code.highcharts.com.cn/highcharts/modules/oldie.js"></script>
<script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script>
let chart = Highcharts.chart('container', {
chart: {
type: 'line'
},
title: {
text: '月平均气温'
},
subtitle: {
text: '数据来源: WorldClimate.com'
},
xAxis: {
categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
},
yAxis: {
title: {
text: '气温 (°C)'
}
},
plotOptions: {
line: {
dataLabels: {
// 开启数据标签
enabled: true
},
// 关闭鼠标跟踪,对应的提示框、点击事件会失效
enableMouseTracking: false
}
},
series: [{
name: '东京',
data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}],
credits: { //去掉版权logo
enabled: false
},
});
</script>
</div>
这是在官网获取的最简单的图表样式,具体呈现为以下:

横坐标xAxis:
max:
坐标轴的最大值。当设置为 null
时,最大值将会自动计算。当 endOnTick
参数值为 true 时,max
值将会向上取整。
其实就是显示到什么位置,正常情况下是categories的值的数组长度-1,就是显示全部数据(图1);但如果将max改为10(长度-2),就会是这样:

showLastLabel:
是否显示坐标轴的最后一个标签。 默认是:true。当
showLastLabel为false时:

min:
坐标轴的最小值,当为 null
是最小值将自动计算。如果设置了 startOnTick
为 true 时,最小值可能会进行向下取整。
与max类似,min的取值决定了横坐标显示多少个值:

showFirstLabel:
是否显示坐标轴的第一个标签 默认是:true。当
showFirstLabel为false时:

lable的steps:
labels: {
step: 1
}
显示 n 的倍数标签,例如设置为 2 则表示标签间隔一个轴标签显示。默认情况下,为了避免轴标签被覆盖,该参数会根据情况自动计算。可以通过设置此参数为 1 来阻止自动计算。
意思就是隔几个显示横坐标,如果设置step为2:

lable的 staggerLines:
只针对水平轴有效,定义轴标签显示行数。设置这个值为4:可以看到标签分别展示在了四行

tickInterval:
官网文档没有翻译,但大概意思是 以轴为单位的刻度线的间隔。在我的理解下是跟lable的step作用一样的,但是不排除复杂图表下显示不同,毕竟没有必要有两个显示相同的属性。设置tickInterval为3时:
