仅对一张图表Highcharts'bindAxis' [英] Highcharts 'bindAxis' for one chart only

问题描述

我试图在我的应用程序中整合MariMekko / Market类型的图表。我在这里找到了一个有趣的实现：

http：/ /jsfiddle.net/h2np93k1/39/

这段代码构造了一个树形图并向它添加了轴。这是通过这段代码完成的：

  Highcharts.seriesTypes.treemap.prototype.bindAxes = function（）{
 Highcharts .Series.prototype.bindAxes.call（本）; 
}; 
  

但是，如果我理解正确，这会导致我的所有 code>图表有轴。我不想要这个，我想只为我的marimekko地图保留轴。

完成此操作的最佳方法是什么？例如，是否有一种简单的方法来扩展charttype？解析方案

简单的做法是 / strong>核心函数并添加条件语句来检查选项，并在需要时应用修改。

在这种情况下，我添加了 isMariMekko 系列中的标志。如果这是真的修改后的代码执行。这是假的原始功能启动：

  Highcharts.wrap（Highcharts.seriesTypes.treemap.prototype，'bindAxes'，function（proceed ）{
 if（this.options.isMariMekko）{
 var treeAxis = {
 min：0，
 dataMin：0，
 max：100，
 dataMax：0 
}; 
 
 Highcharts.Series.prototype.bindAxes.call（this）; 
 Highcharts.extend（this.yAxis.options，treeAxis）; 
 Highcharts.extend（this.xAxis.options，treeAxis）; 
 
} else {
 proceed.apply（this）; //默认操作
} 
 
}）; 
  

关于包装的文件参考： https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

I'm trying to integrate a MariMekko / Market type of chart in my application. I found an interesting implementation here:

http://jsfiddle.net/h2np93k1/39/

This code constructs a treemap and adds axis to it. That is done by this snippet:

Highcharts.seriesTypes.treemap.prototype.bindAxes = function() {
    Highcharts.Series.prototype.bindAxes.call(this);
};

However, if I understand correctly, this will cause all my treemap charts to have axis. I don't want this, I'd like to keep the axis only for my marimekko maps.

What whould be the best way to accomplish this? Is there an easy way to extend a charttype for example?

解决方案

The easy way to do it is to wrap a core function and add conditional statement that checks options and applies the modification when needed.

In this case I added isMariMekko flag in the series. If it's true the modified code executes. It's false the original function launches:

  Highcharts.wrap(Highcharts.seriesTypes.treemap.prototype, 'bindAxes', function(proceed) {
    if (this.options.isMariMekko) {
      var treeAxis = {
        min: 0,
        dataMin: 0,
        max: 100,
        dataMax: 0
      };

      Highcharts.Series.prototype.bindAxes.call(this);
      Highcharts.extend(this.yAxis.options, treeAxis);
      Highcharts.extend(this.xAxis.options, treeAxis);

    } else {
      proceed.apply(this); // default action
    }

  });

Docs reference about wrapping: https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

这篇关于仅对一张图表Highcharts'bindAxis'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！