提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
翻译|使用教程|编辑:吴园园|2020-03-02 15:21:14.290|阅读 513 次
概述:默认情况下,除饼图外,所有图表中均显示x轴和y轴。以下是轴元素的快速概述。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
相关链接:
Highcharts是一款纯JavaScript编写的图表库,为你的Web网站、Web应用程序提供直观、交互式图表。当前支持折线、曲线、区域、区域曲线图、柱形图、条形图、饼图、散点图、角度测量图、区域排列图、区域曲线排列图、柱形排列图、极坐标图等几十种图表类型。
Highcharts最新版本v8.0.0发布,添加了带有动画的数据排序等新功能,并修复了一些BUG。戳此处查看详情!
轴标签,刻度线和网格线
轴标签,刻度线和网格线紧密相连,并且一起缩放。计算其位置以最适合图表中显示的数据。
刻度线
刻度线是沿轴放置的线,以显示测量单位。刻度线之间的间隔主要由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](//php.net/manual/en/function.strftime.php) (see [API reference](//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正版授权的朋友,欢迎
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@cahobeh.cn
文章转载自:本文将演示如何使用DevExpress WPF Grid控件实现列和带的固定,欢迎下载最新版组件体验!
在本文中,我们将探讨如何通过使用 JxBrowser 和 Quill.js 将现代富文本编辑器嵌入到 Java 桌面应用程序中,来克服 Swing、JavaFX 和 SWT 中内置编辑器的局限性。
Word 文档中的批注通常用于协作审阅和反馈。这些批注可能包含文本和图片,它们为文档改进提供了重要的参考信息。本文将演示如何使用 Spire.Doc for Java 在 Java 中提取 Word 文档中的批注文本和图片。
本文主要介绍如何使用DevExpress WinForms Data Grid组件实现列重新排序,欢迎下载最新版组件体验!
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@cahobeh.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢