在Highcharts中设置单个条的宽度

时间:2016-01-21 18:40:32

标签: javascript svg highcharts

我一直在尝试更改使用Highcharts创建的条形图中单个列的宽度。这是codepen

在我所做的所有搜索中,我只能找到此question中给出的两个解决方案。

问题在于,由于它们是在初始化后以dinamically方式设置的,因此任何调用redraw方法的操作都会将其宽度恢复为计算出的宽度。

此外,我不明白为什么他们使用series[0].data[5].graphic.attr('width')以及它如何影响,因为我在对象中看不到这样的属性(console screenshot

最后,在codepen中我也改变了同一点的颜色,但是在初始化函数中这样做了。我想知道是否有办法对宽度做同样的事情。

我错过了什么吗?因为我在API文档中找不到任何内容,而且如果对象中没有这样的属性,我对这些解决方案如何实际工作一无所知。

1 个答案:

答案 0 :(得分:0)

简短说明:

  • attr方法继承自Element类。您可以在原型中看到该方法(在控制台中单击__proto__)。方法attr以两种方式工作:attr(property_name)是一个getter(获得例如width),attr({ property_name: value })是一个setter(设置例如width)。如果您使用源文件(.src.js),那么您会注意到SVGElement类。

  • 宽度将在任何redraw事件中更改,因为它会再次重新计算(如更新点或调整窗口大小)。实际上你可以使用chart.events.redraw并改变宽度。实际上,我会同时使用chart.events.redrawchart.events.load一个函数来更新宽度。

并解释一下,为什么你不能设置宽度,就像你用颜色一样:点级别没有这样的选项,比如pointWidth。您可以仅为一个系列中的所有点设置特定宽度(使用提到的pointWidth)。 Highcharts有一个想法,即添加这样的功能(到核心或作为插件)。欢迎在UserVoice投票。这是一个有趣的例子:http://jsfiddle.net/75oucp3b/14/(适用于v4.1.8)