我有以下问题,我试图添加一个自定义项目到一个extjs在extjs只是一些自定义图标的信息,我得到了工作的图表。雷达图工作正常,我已经得到了图例中的项目,只是把它添加到系列,但这会在控制台中产生错误,因为没有添加值,这不是我想这样做,只是因为它应该没有值。我正在寻找的基本上只是一种方式来添加额外的图例项目,这是不可交互的(没有onclick,悬停等)。这可能吗?
extjs
ddrv8njm1#
完成此操作的最佳方法是定义您自己的Ext.chart.LegendItem扩展(或覆盖)。然后,您还需要扩展(或覆盖)Ext.chart.Legend,以便使用自定义图例项。如果您不想经历这些麻烦,我可以通过将字段添加到存储区(即使没有数据)并将系列添加到图表来添加一个附加图例项。这听起来与您尝试的操作类似,但我没有收到任何错误。请参阅this fiddle。
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' } }] });
1条答案
按热度按时间ddrv8njm1#
完成此操作的最佳方法是定义您自己的
Ext.chart.LegendItem
扩展(或覆盖)。然后,您还需要扩展(或覆盖)Ext.chart.Legend
,以便使用自定义图例项。如果您不想经历这些麻烦,我可以通过将字段添加到存储区(即使没有数据)并将系列添加到图表来添加一个附加图例项。这听起来与您尝试的操作类似,但我没有收到任何错误。请参阅this fiddle。