JavaScript图表库Highcharts入门教程（七）：轴元素

默认情况下，除饼图外，所有图表中均显示x轴和y轴。以下是轴元素的快速概述。

Highcharts是一款纯JavaScript编写的图表库，为你的Web 站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。

Highcharts最新版本v8.0.0发布，添加了带有动画的数据排序等新功能，并修复了一些BUG。戳此处查看详情！

Highcharts最新试用版

轴标签，刻度线和 格线

轴标签，刻度线和 格线紧密相连，并且一起缩放。计算其位置以最适合图表中显示的数据。 

刻度线

刻度线是沿轴放置的线，以显示测量单位。刻度线之间的间隔主要由tickInterval和tickPixelInterval选项决定。标签和 格线的位置与刻度线相同。 

tickInterval选项确定刻度标记的间隔（以轴为单位）。刻度间隔默认为null，这意味着它被计算为近似跟随线性和日期时间轴上的tickPixelInterval。

在分类轴上，null tickInterval将默认为1，即一个类别。

请注意，日期时间轴以毫秒为单位，因此，例如，一天的间隔表示为24 3600 1000。 

在对数轴上，tickInterval基于幂，因此tickInterval为1表示对0.1、1、10、100等各一个刻度。tickInterval为2表示对0.1、10、1000等为刻度。tickInterval为0.2在0.1、0.2、0.4、0.6、0.8、1、2、4、6、8、10、20、40等上打勾

“ tickPixelInterval”基于像素值（如果“ tickInterval”为空）设置刻度线的近似像素间隔。它不适用于分类轴。y轴默认为72，x轴默认为100。

如果设置了minorTickInterval选项，则在主要刻度之间布置次要刻度。这包括较小的刻度线和较小的 格线，它们在外观上都有自己的选择，但不包括标签。 

标签

可以在显示其对应数据值的轴上找到轴标签。也可以使用格式化程序功能来定制标签：

yAxis: {    labels: {        formatter: function() {            return this.value + ' %';        }    },},

上面的示例采用y轴标签的值，并在其末尾添加％符 。

格线

格线是水平（和/或垂直）线的集合，这些水平线将图表划分为 格，从而更易于读取图表的值。 

要为x轴或y轴启用或禁用 格线，请设置相应轴的gridLineWidth：

xAxis ：{    gridLineWidth ：1} ，yAxis ：{    gridLineWidth ：1}

y轴的 格线默认为启用（gridLineWidth：1），而x轴的 格线（gridLineWidth：0）默认为禁用。

格线的其他选项可以在x和y轴的API参考中找到。

细 格线是可以通过设置minorTickInterval选项启用的中间线。

多轴

可以有多个轴并将它们与不同的数据系列链接。为此，需要创建多个轴，如下所示：

yAxis: [{ //--- Primary yAxis    title: {        text: 'Temperature'    }}, { //--- Secondary yAxis    title: {        text: 'Rainfall'    },    opposite: true}],series: [{    yAxis: 0,    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]},{    yAxis: 1,    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]}]

请注意，使用列表创建了多个轴，因此第一个yAxis以索引0开头。“ opposite：true”选项将轴置于图表的右侧。

轴标题 

轴标题，显示在轴线旁边。默认情况下，此标题为y轴，默认情况下为x轴隐藏。

轴类型

轴可以是线性，对数，日期时间或类别。轴类型设置如下：

// The types are 'linear', 'logarithmic' and 'datetime'yAxis: {    type: 'linear',}// Categories are set by using an arrayxAxis: {    categories: ['Apples', 'Bananas', 'Oranges']}

线性

沿轴的数字是线性比例。这是默认的轴类型。如果数据系列中仅存在y值，则将x轴标记为从0到y值的数量（显示y值的数组索引）：

var chart = new Highcharts.Chart({        chart: {            renderTo: 'container',            type: 'column'        },        title: {            text: 'Fruit Consumption'        },        xAxis: {            title: {                text: 'Fruit Number'            },            tickInterval: 1        },        yAxis: {            title: {                text: 'Fruit eaten'            },            tickInterval: 1        },        series: [{            name: 'Jane',            data: [1, 0, 4]        }, {            name: 'John',            data: [5, 7, 3]        }]    }});

对数

在对数轴上，沿轴的数字对数增加，并且轴根据图表中显示的数据系列进行自我调整。

请注意，在对数轴上，tickInterval选项基于幂，因此tickInterval为1表示对0.1、1、10、100等的一个刻度。tickInterval为2意味着对0.1、10、1000等的刻度。 tickInterval为0.2会在0.1、0.2、0.4、0.6、0.8、1、2、4、6、8、10、20、40等上打勾。

要注意的另一件事是，对数轴永远不会变为负数，因为每个完整轴单位都是前一个的十分之一。结果，Highcharts将删除与轴关联的0或负点，并且如果您尝试将axis.min  选项设置为0或负，它将失败并显示错误。

日期时间

日期时间轴以适当的时间间隔打印日期日期值的标签。在内部，datetime轴是线性数字轴，以自1970年1月1日午夜以来的毫秒数为基础，由JavaScript Date对象指定。根据比例，日期时间标签将表示为时间或日期。

一些有用的功能是：

// Get time in millis for UTCDate.UTC(year,month,day,hours,minutes,seconds,millisec)// Get time in millis for your local timeDate.parse("Month day, year");// Built in Highcharts date formatter based on the [PHP strftime](https://php.net/manual/en/function.strftime.php) (see [API reference](https://api.highcharts.com/class-reference/Highcharts#.dateFormat) for usage)Highcharts.dateFormat("Month: %m Day: %d Year: %Y", 20, false);

请注意，基于Unix的服务器时间戳表示为秒而不是毫秒。知道这一点很有用，因为PHP时间是基于Unix时间戳的，因此将其与Highcharts一起使用时，该值仅需乘以1000。

在Highstock中，x轴始终是日期时间轴。

分类

如果存在类别，则使用类别的名称代替轴上的数字或日期。请参阅xAxis.categories。

我应该使用哪种轴类型/strong>

Highcharts演示中的许多示例   都带有带有类别的xAxis。但是，重要的是要了解何时使用类别以及何时使用线性或日期时间xAxis更好。

类别是一组项目，例如“ Apples”，“ Pears”和“ Oranges”或“ Red”，“ Green”，“ Blue”，“ Yellow”。这些类别的共同点是没有中间值。苹果和梨之间没有滑动过渡。同样，如果您将一个类别排除在外，则用户将无法理解遗漏的内容。假设您每隔第二次打印“红色”，“绿色”，“蓝色”或“黄色”颜色，则用户将不知道缺少什么颜色。因此，Highcharts没有自动的方法来隐藏类别（如果它们在轴上变得密集）。如果轴标签重叠有问题，请尝试使用xAxis.labels.staggerLines选项，或旋转标签。 选项，最好是使用线性或日期时间轴。

线性或日期时间类型的xAxis的优点是Highcharts能够确定数据标签的距离，因为它知道如何进行插值。默认情况下，标签之间的距离大约为100px，可以在tickPixelInterval选项中进行更改。如果您具有可预测的类别，例如“ Item1”，“ Item2”，“ Item3”或“ 2012-01-01”，“ 2012-01-02”，“ 2012-01-03”等，则组合线性或日期时间轴类型使用xAxis.labels.formatter可能是更好的选择。

动态更新轴

渲染时间过后，可以使用新信息更新轴。

温馨提示：疫情期间返岗上班需戴口罩、勤洗手、常通风，做好防护措施！

想要了解或购买Highcharts正版授权的朋友，欢迎咨询在线客服

标签：