世俱杯 2025

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

点击下载Highcharts最新试用版

线宽

允许更改线的宽度。

更改线宽的代码：

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

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

游标

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

数据标签

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

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

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

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

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

短划线样式

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

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'  
}]