如何格式化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