highcharts报表插件之Symbols参数的使用

最新推荐文章于 2021-06-28 05:52:51 发布

原创最新推荐文章于 2021-06-28 05:52:51 发布 · 3k 阅读

0 ·

CC 4.0 BY-SA版权

jQuery 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了Highcharts报表插件中Symbols参数的使用方法，详细讲解了如何配置series point markers的符号，并通过示例展示了Symbols如何循环使用，帮助读者理解其工作原理。

Symbols配置项

存放series point markers的符号数组。使用完所有symbols时，新的symbols从开始位开始，

默认值：

symbols: [
         'circle',
         'diamond',
         'square',
         'triangle',
         'triangle-down'
]

实例1：默认值

Highcharts.setOptions({
         symbols:['circle','diamond','square','triangle','triangle-down']
});
var chart = new Highcharts.Chart({
         chart:{
                   renderTo:'container',
                   marginBottom:120,
                   width:500
         },
         legend:{
         },
         series:[{
                   data:[6,4,2],
                   name:'First'
         },{
                   data:[7,3,2],
                   name:'Second'  
         },{
                   data:[9,4,8],
                   name:'Third'  
         },{
                   data:[1,2,6],
                   name:'Fourth'       
         },{
                   data:[4,6,4],
                   name:'Fifth'       
         },{
                   data:[1,2,7],
                   name:'Sixth'       
         },{
                   data:[4,2,5],
                   name:'Seventh'        
         },{
                   data:[8,3,2],
                   name:'Eighth'       
         },{
                   data:[4,5,6],
                   name:'Ninth'       
         }]
});

运行如下：

实例2：

Highcharts.setOptions({
         symbols:['circle','circle','circle','circle','circle']
});
var chart = new Highcharts.Chart({
         chart:{
                   renderTo:'container',
                   marginBottom:120,
                   width:500
         },
         legend:{
         },
         series:[{
                   data:[6,4,2],
                   name:'First'
         },{
                   data:[7,3,2],
                   name:'Second'  
         },{
                   data:[9,4,8],
                   name:'Third'  
         },{
                   data:[1,2,6],
                   name:'Fourth'       
         },{
                   data:[4,6,4],
                   name:'Fifth'       
         },{
                   data:[1,2,7],
                   name:'Sixth'       
         },{
                   data:[4,2,5],
                   name:'Seventh'       
         },{
                   data:[8,3,2],
                   name:'Eighth'       
         },{
                   data:[4,5,6],
                   name:'Ninth'       
         }]
});

运行如下：