将自定义项添加到 extjs 中的图表图例中

Add a custom item to the legend of a chart in extjs

本文关键字：extjs 自定义 添加      更新时间：2023-09-26

我有以下问题，我正在尝试将自定义项目添加到extjs中的radar chart中，只是为了提供有关我在图表上工作的一些自定义图标的信息。

雷达图工作正常，我只需将其添加到系列中即可在图例中获取该项目，但这会在控制台中出现错误，因为没有附加值，这不是我想要的方式，因为它不应该有价值。

我正在寻找的基本上只是添加其他图例项的一种方式，这些图例项不可交互（没有点击、悬停等）。

这可能吗？

实现此目的的最佳方法是定义您自己的 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'
        }
    }]
});
相关文章：