如何格式化ExtJs图表轴?

时间:2011-12-12 14:29:31

标签: extjs charts

我使用以下代码创建一个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? (例如设置颜色,字体大小,字体系列等)

5 个答案:

答案 0 :(得分:5)

不幸的是,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类中设置,所以你必须寻找它。它可能是轴配置中的手动设置,可能是由主题生成的,或者完全是其他内容。

答案 1 :(得分:4)

这可能有效

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

答案 2 :(得分:1)

我认为没有这个属性,但您可以使用CSS格式化它们。

答案 3 :(得分:1)

我想补充一下这里的答案。如果您正在使用新的sencha-charts包,则必须将渲染器直接放在轴上而不是标签内。 E.g:

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

答案 4 :(得分:0)

您可以通过在图表上设置主题来查看图表指南:

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