JavaScript图表库Highcharts入门教程(七):轴元素

翻译|使用教程|编辑:吴园园|2020-03-02 15:21:14.290|阅读 31 次

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

# 您正在找协同办公软件吗?点击这里站长给您推荐 #

相关链接:

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

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

点击下载Highcharts最新试用版

JavaScript图表库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 array
xAxis: {
    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 UTC
Date.UTC(year,month,day,hours,minutes,seconds,millisec)
// Get time in millis for your local time
Date.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。

我应该使用哪种轴类型?

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正版授权的朋友,欢迎咨询慧都在线客服



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,尊重他人劳动成果

文章转载自:Highcharts https://www.highcharts.com/docs/chart-concepts/axes

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Highcharts

纯JavaScript编写的开源图表库,为你的Web应用程序提供直观的、交互式图表

在线
客服
咨询
电话
400-700-1020
在线
QQ
购物车 反馈 返回
顶部
在线客服系统
live chat