在图例中显示不同的文本

Question

这是关于版本 4.2.2 我们有这样的图表

var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data'],
    data: [
        { 'name': 'metric one',   'data':10 },
        { 'name': 'metric two',  'data':27 }
    ]
});

Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 300,
    animate: true,
    store: store,
    legend: {
        position: 'right'
    },
    axes: [
        {
            type: 'Numeric',
            position: 'left',
            fields: ['data'],
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0')
            },
            title: 'Sample Values',
            grid: true,
            minimum: 0
        },
        {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Sample Metrics'
        }
    ],
    series: [
        {
            type: 'column',
            axis: 'left',
            highlight: true,
            tips: {
              trackMouse: true,
              width: 140,
              height: 28,
              renderer: function(storeItem, item) {
                this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
              }
            },
            label: {
              display: 'insideEnd',
              'text-anchor': 'middle',
                field: 'data',
                renderer: Ext.util.Format.numberRenderer('0'),
                orientation: 'vertical',
                color: '#333'
            },
            xField: 'name',
            yField: 'data'
        }
    ]
});

但是Legend 只显示字段名称，这不是很有帮助。我们需要在这里应用一个自定义值，它应该是静态类型的。但我们没有发现这样做。有一个 showInLegend 属性，但我们没有找到 legendText 或 displayText 属性，这可能允许我们将名称从 data 更改为 A much better Name。

编辑 在图例中显示更多日期的示例

Ext.application({
    name : 'Fiddle',

    launch : function() {
        var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data', 'data2'],
    data: [
        { 'name': 'metric one',   'data':10, 'data2':2 },
        { 'name': 'metric two',  'data':27, 'data2': 5 }
    ]
});

Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 300,
    animate: true,
    store: store,
    legend: {
        position: 'right'
    },
    axes: [
        {
            type: 'Numeric',
            position: 'left',
            fields: ['data','data2'],
            label: {
                renderer: Ext.util.Format.numberRenderer('0,0')
            },
            title: 'Sample Values',
            grid: true,
            minimum: 0
        },
        {
            type: 'Category',
            position: 'bottom',
            fields: ['name'],
            title: 'Sample Metrics'
        }
    ],
    series: [
        {
            type: 'column',
            axis: 'left',
            highlight: true,
            stacked: true,
            tips: {
              trackMouse: true,
              width: 140,
              height: 28,
              renderer: function(storeItem, item) {
                this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
              }
            },
            label: {
              display: 'insideEnd',
              'text-anchor': 'middle',
                field: 'data',
                renderer: Ext.util.Format.numberRenderer('0'),
                orientation: 'vertical',
                color: '#333'
            },
            xField: 'name',
            yField: ['data','data2'],
            title:'YourNewLabel'
        }
    ]
});
    }
});

Answer 1

您可以使用title 更改图例中的label。查看我从您的示例代码创建的this fiddle 以供使用。

series: [
        {
            type: 'column',
            axis: 'left',
            highlight: true,
            tips: {
              trackMouse: true,
              width: 140,
              height: 28,
              renderer: function(storeItem, item) {
                this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' $');
              }
            },
            label: {
              display: 'insideEnd',
              'text-anchor': 'middle',
                field: 'data',
                renderer: Ext.util.Format.numberRenderer('0'),
                orientation: 'vertical',
                color: '#333'
            },
            xField: 'name',
            yField: 'data',
            title:'YourNewLabel'
        }

更新：如果您有多个字段，请提供相应标题的array。例如：

title:['My First Field','My Second Field']

这是fiddle demonstrating multiple titles