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

不幸的是，Sencha的文檔要么含糊不清，要么不完整。 有時，您最終會通過查看圖表示例來查找特定功能。 其他時候，你必須去潛水源。 我知道，這令人沮喪。

聽起來你正在嘗試自定義軸標簽的樣式。 有一個名為label的配置（顯示在Ext.chart.axis.Axis文檔的示例代碼中，但不在配置中）。 它需要一個Ext.chart.Label類型的對象，它本身具有顏色，字體，方向，自定義渲染器功能，旋轉，顯示位置等的配置。您可以在此處獲得摘要，但它也相當不完整。

如果您正在尋找其他東西，我可以盡我所能為您指明正確的方向。 我花了幾個小時查看我自己的項目的源代碼，尋找像這樣的答案。

編輯：要編輯軸線本身，您可能需要對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 2

這可能會奏效

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

Answer 3

我想補充一下這里的答案。 如果您使用的是新的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

Answer 4

我不認為有這個屬性，但你可以使用CSS格式化它們。

Answer 5

您可以通過在圖表上設置主題來完成，查看圖表指南：

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