如何格式化ExtJs图表轴？

Question

我用下面的代码创建一个ExtJs图表，不幸的是我不知道如何设计xAxis和yAxis。在ExtJs文档中找不到任何帮助。

Ext.create('Ext.chart.Chart', { 
     renderTo: div, 
     theme: 'Browser:gradients', 
     width: div.offsetWidth, 
     height: div.offsetHeight, 
     animate: true, 
     store: store, 
     axes: [ 
       { 
        title: 'Number of Ratings', 
        type: 'Numeric', 
        position: 'left', 
        fields: ['data1', 'data2', 'data3'], 
        minimum: 0, 
        tips: { 
         trackMouse: true, 
         width: 110, 
         height: 25, 
         renderer: function (storeItem, item) { 
          this.setTitle(storeItem.get('name'); 
         } 
        }, 
       }, 
       { 
        title: 'Rating Categories', 
        type: 'Category', 
        position: 'bottom', 
        fields: ['name'], 
       } 
      ], 
     series: [ 
       { 
      type: 'column', 
      title: createLegendTitles(response.ratingResults), 
      xField: 'name', 
      yField: ['data1','data2', 'data3'], 
     } 
     ], 
}); 

如何格式化图表的xAxis和yAxis？ （例如，设置颜色，字体大小，字体家族等）

Answer 1

我不认为有这个属性，但你可以使用CSS格式化它们。

Answer 2

不幸的是，Sencha文档对此没有明确或不完整。有时，您最终会通过查看图表示例来查找特定功能。其他时候，你必须去源潜水。我知道这很令人沮丧。

听起来好像您正在尝试自定义轴标签的样式。有一个名为label的配置（在Ext.chart.axis.Axis的文档中的示例代码中显示，但不在配置中）。它需要一个类型为Ext.chart.Label的对象，该对象本身具有用于配置颜色，字体，方向，自定义渲染器功能，旋转，显示位置等的配置。您可以获得摘要here，但它也不完整。

如果还有其他东西在找，我可以尽我所能指引您朝正确的方向发展。我花了几个小时在工作中寻找我自己的项目的源代码，就像这样寻找答案。

编辑：要编辑轴线本身，您可能必须做一些覆盖/延伸Ext.chart.axis.Axis类。在drawAxis方法的底部，有一些代码，看起来像这样：

if (!me.axis) { 
    me.axis = me.chart.surface.add(Ext.apply({ 
     type: 'path', 
     path: path 
    }, me.axisStyle)); 
} 

看起来这就是你要添加的代码将样式应用于轴。据我所知，me.axisStyle属性实际上并未在Axis类中设置，因此您必须为此寻找。它可能是轴配置中的手动设置，它可能由主题或其他东西完全生成。

Answer 3

您可以通过设置主题图表上做到这一点，请查看图表指南：

http://docs.sencha.com/ext-js/4-0/#/guide/drawing_and_charting

Answer 4

这可能会实现

axes: [ 
    { 
     title: 'Number of Ratings', 
     label: { 
      renderer: function(v){ 
       return '<span class="numRatingsAxis">' + v + '</span>'; 
      } 
     } 
     ... 
    } 
] 

Answer 5

我想在这里补充答案。如果您使用新的sencha-charts包，则必须将渲染器直接放置在轴上而不是标签内。例如： -

axes: [{ 
    title: 'Number of Ratings', 
    renderer: function(v){ 
     return '<span class="numRatingsAxis">' + v + '</span>'; 
    } 
}] 

见https://docs.sencha.com/extjs/5.1/whats_new/5.0/charts_upgrade_guide.html#Renderers