在Highchart的勾号上应用自定义样式 [英] Applying custom style on ticks of Highchart

问题描述

我想将自定义样式应用于Highcharts的xAis勾号。我想以圆圈而不是线条的形式绘制蜱。
像 ticks.chart.renderer.cirlce（）;

无法找到一种方法完成它。

解决方案

您可以包装 getMatkPath 另请参阅： http://jsfiddle.net/Yrygy/83/

  Highcharts.wrap（Highcharts.Tick.prototype，'getMarkPath'，函数（prev，x，y，tickLength，tickWidth，horiz，renderer）{ 
 return renderer.circle（x，y，tickLength）; 
}）; 
  

编辑：

从Highcharts或Highstock平移等，需要从> getMarkPath 返回数据是路径数组（对于SVG， d ）） 。

例如： http://jsfiddle.net / AVhaL / 1 /

更新：（2016-01-28）：

Highcharts 4.2.x新方法是必需的（我们应该返回tickmark的路径，而不是渲染的对象）：

  Highcharts.wrap Highcharts.Tick.prototype'getMarkPath'函数（prev，x，y，tickLength，tickWidth，horiz，renderer）{
 return renderer.symbol（'circle'，x  -  tickLength / 2，y  -  tickLength / 2，tickLength，tickLength）; 
}）; 
  

I want to apply custom style on xAis ticks of Highcharts. I want to style ticks in the form of circle instead of line. like ticks.chart.renderer.cirlce();

Not able to find a way to get it done.

解决方案

You can wrap getMatkPath function, to render another tick, see: http://jsfiddle.net/Yrygy/83/

Highcharts.wrap(Highcharts.Tick.prototype, 'getMarkPath', function (prev, x, y, tickLength, tickWidth, horiz, renderer) {
    return renderer.circle(x, y, tickLength);
});

Edit:

When using zoom/panning etc from Highcharts or Highstock, it is required to returned data from getMarkPath is array of path (d for SVG).

For example: http://jsfiddle.net/AVhaL/1/

Update: (2016-01-28):

In Highcharts 4.2.x new method is required (we should return path for tickmark, not the rendered object):

Highcharts.wrap(Highcharts.Tick.prototype, 'getMarkPath', function(prev, x, y, tickLength, tickWidth, horiz, renderer) {
  return renderer.symbol('circle', x - tickLength / 2, y - tickLength / 2, tickLength, tickLength);
});

这篇关于在Highchart的勾号上应用自定义样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！