在 extjs 中的圖表圖例中添加自定義項

Question

我有以下問題，我正在嘗試向extjs的radar chart添加一個自定義項目，只是為了獲取有關我在圖表上工作的一些自定義圖標的信息。

雷達圖工作正常，我通過簡單地將它添加到系列中得到了圖例中的項目，但這會在控制台中出現錯誤，因為沒有增加值，這不是我想要的方式，因為它應該沒有價值。

我正在尋找的基本上只是一種添加額外的圖例項目的方法，這些項目是不可交互的（沒有點擊、懸停等。）

這可能嗎？

Answer 1

實現此目的的最佳方法是定義您自己的Ext.chart.LegendItem擴展（或覆蓋）。 然后，您還需要擴展（或覆蓋） Ext.chart.Legend以使用您的自定義圖例項。

如果您不想經歷所有這些麻煩，我可以通過將字段添加到商店（即使沒有數據）並將系列添加到圖表來添加額外的圖例項。 盡管我沒有收到任何錯誤，但這聽起來與您嘗試做的很相似。 看到這個小提琴。

var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data1', 'data2', 'data3', 'data4'],
    data: [
        { 'name': 'metric one',   'data1': 14, 'data2': 12, 'data3': 13 },
        { 'name': 'metric two',   'data1': 16, 'data2':  8, 'data3':  3 },
        { 'name': 'metric three', 'data1': 14, 'data2':  2, 'data3':  7 },
        { 'name': 'metric four',  'data1':  6, 'data2': 14, 'data3': 23 },
        { 'name': 'metric five',  'data1': 36, 'data2': 38, 'data3': 33 }
    ]
});

Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 300,
    animate: true,
    theme:'Category2',
    store: store,
    legend: {
        position: 'top'
    },
    axes: [{
        type: 'Radial',
        position: 'radial',
        label: {
            display: true
        }
    }],
    series: [{
        type: 'radar',
        xField: 'name',
        yField: 'data1',
        showInLegend: true,
        showMarkers: true,
        markerConfig: {
            radius: 5,
            size: 5
        },
        style: {
            'stroke-width': 2,
            fill: 'none'
        }
    },{
        type: 'radar',
        xField: 'name',
        yField: 'data2',
        showMarkers: true,
        showInLegend: true,
        markerConfig: {
            radius: 5,
            size: 5
        },
        style: {
            'stroke-width': 2,
            fill: 'none'
        }
    },{
        type: 'radar',
        xField: 'name',
        yField: 'data3',
        showMarkers: true,
        showInLegend: true,
        markerConfig: {
            radius: 5,
            size: 5
        },
        style: {
            'stroke-width': 2,
            fill: 'none'
        }
    },{
        type: 'radar',
        xField: 'name',
        yField: 'data4',
        showMarkers: false,
        showInLegend: true,
        markerConfig: {
            radius: 5,
            size: 5
        },
        style: {
            'stroke-width': 2,
            fill: 'none'
        }
    }]
});