在Highchart的勾号上应用自定义样式 | 在Highchart的勾号上应用自定义样式

本文介绍了在Highchart的勾号上应用自定义样式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想将自定义样式应用于Highcharts的xAis勾号。我想以圆圈而不是线条的形式绘制蜱。
像

您可以包装 getMatkPath 另请参阅：

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

编辑：

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

例如：

更新：（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的勾号上应用自定义样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！