彩票走势图

JavaScript图表库Highcharts入门教程(九):系列数据(下)

翻译|使用教程|编辑:吴园园|2020-03-16 09:37:15.910|阅读 353 次

概述:系列是一组数据,例如折线图或一组列。图表上绘制的所有数据都来自系列对象。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

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

点击下载Highcharts最新试用版

线宽

允许更改线的宽度。


更改线宽的代码:

series: [{
    data: [216.4, 194.1, 95.6],
    lineWidth: 5}],
堆叠

堆叠使系列可以彼此重叠放置。

游标

允许光标更改外观以指示点和系列是可单击的。

数据标签

允许在图表上为一系列数据的每个点显示数据标签。


显示如何启用数据标签的代码示例:

plotOptions: {
    line: {
        dataLabels: {
            enabled: true
        }
    }
},

注意:您可能希望禁用鼠标跟踪功能,该功能会突出显示系列并将鼠标悬停在鼠标悬停上(如果禁用了鼠标跟踪功能,则不会显示工具提示)。

数据标签上显示的文本也可以通过使用formatter选项进行自定义。

短划线样式

允许使用虚线代替实线,有几种不同的破折号选项可用。

设置单个系列的虚线的代码(dashStyle也可以在plotOptions中设置):
series: [{
    data: [1, 3, 2, 4, 5, 4, 6, 2, 3, 5, 6],
    dashStyle: 'longdash'
}]

区域

在某些情况下,您可能希望将图形的某些部分显示为不同的部分,一个常见的示例是当数据落入特定范围时使用不同的颜色。使用可以达到此效果zones。默认情况下,分区是在yAxis上完成的,但是可以通过zoneAxis在系列上设置变量来轻松更改。对于分区本身,您必须定义一个名为的数组zones,其中每个条目均对应于一个区域,该区域由parameter分隔,该参数value是该区域所到达的点。每个区域可以覆盖的设置是color,fillColor和dashStyle。

用于分区的代码:

zones: [{  
    value: 0,  
    color: '#f7a35c'  
}, {  
    value: 10,  
    color: '#7cb5ec'  
}, {  
    color: '#90ed7d'  
}]
此方法的另一个常见用途是对未来的估计数据点进行样式设置。


想要了解或购买Highcharts正版授权的朋友,欢迎

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:Highcharts

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP