要自定义Highcharts的legend中,每个系列名字前的图标(symbol)的样式,除了在初始化图时使用官方提供的有限的参数,还可以重写Highcharts.seriesTypes[type].prototype.drawLegendSymbol这个函数。type是图的类型,函数会传入两个参数,分别是legend和item。
官方默认的的Area图的drawLegendSymbol函数如下:
/** * Get the series' symbol in the legend * * @param {Object} legend The legend object * @param {Object} item The series (this) or point */ drawLegendSymbol: function (legend, item) { item.legendSymbol = this.chart.renderer.rect( 0, //方块的左上角点的x坐标 legend.baseline - 11, //方块的左上角点的y坐标 legend.options.symbolWidth, // 这个就是chart初始化参数中legend里设置的symbolWidth属性,是方块的宽 12, // 是方块的高 2 // 圆角的半径 ).attr({ zIndex: 3 }).add(item.legendGroup); }
假如修改了方块左上角点的x位置,那么为了不让方块覆盖到文字上,则初始化chart时,legend对象的symbolPadding属性也要做对应的设置。例如:
左上角点是0 + 20,则symbolPadding要设置也成20。
官方代码中的另外一个函数:
/** * Get the series' symbol in the legend. This method should be overridable to create custom * symbols through Highcharts.seriesTypes[type].prototype.drawLegendSymbol.注意:官方注释写错了,写成了drawLegendSymbols,多了一个s * * @param {Object} legend The legend object */ drawLegendSymbol: function (legend) { var options = this.options, markerOptions = options.marker, radius, legendOptions = legend.options, legendSymbol, symbolWidth = legendOptions.symbolWidth, renderer = this.chart.renderer, legendItemGroup = this.legendGroup, baseline = legend.baseline, attr; // Draw the line if (options.lineWidth) { attr = { 'stroke-width': options.lineWidth }; if (options.dashStyle) { attr.dashstyle = options.dashStyle; } this.legendLine = renderer.path([ M, 0, baseline - 4, L, symbolWidth, baseline - 4 ]) .attr(attr) .add(legendItemGroup); } // Draw the marker if (markerOptions && markerOptions.enabled) { radius = markerOptions.radius; this.legendSymbol = legendSymbol = renderer.symbol( this.symbol, (symbolWidth / 2) - radius, baseline - 4 - radius, 2 * radius, 2 * radius ) .add(legendItemGroup); } }
drawLegendSymbol函数中定义的radius属性,会在Legend.propotype中的colorizeItem函数中被覆盖掉:
/** * Set the colors for the legend item * @param {Object} item A Series or Point instance * @param {Object} visible Dimmed or colored */ colorizeItem: function (item, visible) { var legend = this, options = legend.options, legendItem = item.legendItem, legendLine = item.legendLine, legendSymbol = item.legendSymbol, hiddenColor = legend.itemHiddenStyle.color, textColor = visible ? options.itemStyle.color : hiddenColor, symbolColor = visible ? item.color : hiddenColor, markerOptions = item.options && item.options.marker, symbolAttr = { stroke: symbolColor, fill: symbolColor }, key, val; if (legendItem) { legendItem.css({ fill: textColor }); } if (legendLine) { legendLine.attr({ stroke: symbolColor }); } if (legendSymbol) { // Apply marker options if (markerOptions) { markerOptions = item.convertAttribs(markerOptions); for (key in markerOptions) { val = markerOptions[key]; if (val !== UNDEFINED) { symbolAttr[key] = val; } } } legendSymbol.attr(symbolAttr); // 这句执行完之后,会给legendSymbol这个对象添加 r=4 这个值,就会影响symbol的圆角。 }
上面函数中的markerOptions = item.options && item.options.marker这句,给markerOptions赋值,它的值是:
markerOptions : { enabled: false, lineColor: "#FFFFFF", lineWidth: 0, radius: 4,// 这个用这个值,给legendSymbol对象增加了r=4的属性,导致最终生成的SVGElement对象的rx,ry都设置成4,出现了圆角。 states: Object }
这些值来自chart初始化参数plotOptions的series的marker属性。
相关推荐
A utility designed to make it much easier to create custom legend labels based on the data contained in the attribute table of a feature layer. http://www.maplogic.com/
winfrom自带的chart控件,由于功能限制,没有实现legend选中事件,自己通过代码,通过光标的坐标和legend 的比列坐标转换,实现legend选中。
它会创建一个文本符号,其符号在Symbol的上方,并添加该符号的定义以及在画板下有任何overrides的overrides 。 请注意,只有在SymbolInstance上将其override ,它才会添加override 。 功能请求和拉取请求非常受欢迎...
flash builder建的actionscript项目,flash chart,现实了legend交互,多数据提示,双轴坐标,格式化坐标显示(可带单位),piechart,linechart,columnchart,combinechart(混合图表)
legend 图例组件可以分组展示。详细说明:https://blog.csdn.net/qq_36437172/article/details/106125254
Legend文件传送软件是运行在Linux下的一款自由软件,它提供了在linux环境下局域网文件传送的方法,目前次版本支持多个文件同时传送接收,添加临时用户,修改用户个性头像,修改自己昵称的功能。在软使用方面,以用户...
Legend文件传送软件是运行在Linux下的一款自由软件,它提供了在linux环境下局域网文件传送的方法,目前次版本支持多个文件同时传送接收,添加临时用户,修改用户个性头像,修改自己昵称的功能。在软使用方面,以用户...
legend是常用的图上标注函数,本文详细阐述了各种情况下使用者关于部分标注问题可能会遇到的困难,具有很好的参考价值,代码可运行,可供读者自行学习。
对echarts压缩包进行修改,当legend过多时,可以进行翻页
Matlab中图例注释函数legend详解
LEGEND注册机,仅供学习用处,不得私自用于商业用途。
LEGEND for HGE源码
前端项目-chartist-plugin-legend,CharList.js的图例插件。
Legend of Mir2数据结构,传奇1.76版的数据结构协议,可以用来解压导出传奇1.76客户端的素材
LEGEND测试引擎%2B登录器%2B注册机
Qt使用QChart制作统计图图例由setAlignment()设置位置,但是项目需求中title和在同一行title前添加图标,重写时使用了QGraphicsView,QGraphicsScene进行嵌套(博客中有部分内容,下载前先看看是否是自己需要)
CCI-LC_Maps_Legend Legend of the global CCI‐LC maps, based on LCCS
Matlab如何在figure画图legend中加入分数latex代码?.docx
Java The Legend - Past, Present, and Future 英文无水印pdf pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络,如有侵权,请联系上传者或csdn删除 本资源转载自网络,如有...
Orions Legend of Wizards卡片查看工具 快速查找卡片的中文说明