有条件地覆盖 Ext JS/Sencha 图表框架

Question

我是 Ext JS 和 Sencha 图表的新手。对于我们的应用程序，我们有多个图表，其中一个图表我需要隐藏 X 轴上的破折号。我们使用的是 Ext JS 5.1 版，我在其中找不到 dashSize 属性。在框架中进行一些挖掘之后，我做了一个如下所示的空覆盖

Ext.define('Ext.overrides.chart.axis.sprite.Axis', {
override: 'Ext.chart.axis.sprite.Axis',

renderTicks: function (surface, ctx, layout, clipRect) {        
}});

这对我的要求很有用，但适用于应用程序中的所有图表，我如何进行条件覆盖，所以我需要这样的东西，但不太确定如何将配置传递给框架

Ext.define('Ext.overrides.chart.axis.sprite.Axis', {
override: 'Ext.chart.axis.sprite.Axis',

renderTicks: function (surface, ctx, layout, clipRect) { 
   if(condition)
      //empty
   else
      this.superclass.renderTicks.call();
}});

请帮忙。让我知道是否需要提供更多详细信息...

Answer 1

如果你根本不需要你的底轴，你可以简单地设置：

axes: [{
    type: 'category',
    position: 'bottom',
    fields: 'name',
    hidden: true // this will hide the axis
}]

如果这不是一个好的选择，并且您的覆盖适合您，您可以简单地向轴添加一个额外的配置以将其用作条件，如下所示：

axes: [{
    type: 'category',
    position: 'bottom',
    fields: 'name',
    hideMajorTicks: true // custom config
}]

Ext.define('Ext.overrides.chart.axis.sprite.Axis', {
    override: 'Ext.chart.axis.sprite.Axis',

    renderTicks: function (surface, ctx, layout, clipRect) {
        var axis = layout.segmenter && layout.segmenter.getAxis();

        if (axis && axis.hideMajorTicks) return;

        this.callParent([surface, ctx, layout, clipRect]);
    }
});

有条件地覆盖 Ext JS/Sencha 图表框架

Conditionally overriding Ext JS/Sencha Chart framework

javascript

extjs

charts

sencha-cmd

sencha-charts