Question

首先：这是解释我问题的小提琴：https://fiddle.sencha.com/#fiddle/hgm

总而言之，我有一个非常简单的图表绑定到商店。商店很少有空的＆＃34;记录，就像这样：

var storeA = Ext.create('Ext.data.Store', {
    fields: ['name', 'value', 'length'],
    data: [
        {"name": "A-0", "value": 18.34, "length": 30},
        {"name": "A-1", "value": 2.67, "length": 35},
        {"name": "", "value": 0, "length": 0} // this is what I call an empty record
    ]
});

我的饼图非常简单：

var donut = Ext.create('Ext.chart.PolarChart', {
    title: 'Test',
    animation: true,
    width: 300,
    height: 300,
    renderTo: Ext.getBody(),

    store: storeA,

    legend: {
        docked: 'bottom'
    },

    series: [{
        type: 'pie',
        angleField: 'value',
        lengthField: 'length',
        colors: ["#9aff4f", "#35b4e3", "#ffb400"],
        donut: 20,
        label: {
            field: 'name',
            display: 'inside'
        },
        highlight: true
    }]
});

但我希望空记录不像实际上那样出现在图例中：

enter image description here

我想补充一点，在将商店交给图表之前，我不想清理商店。我需要使用这个完全相同的商店。

Answer 1

Ext没有“空记录”的概念，因此它只需要在商店中找到的任何内容并将其绘制在图表上。您可以通过覆盖图表在商店和图表之间插入自定义逻辑，或者在绑定之前需要“清理”商店。

Answer 2

您可以将自定义tpl添加到图例配置中，如下所示：

legend: {
    docked: 'bottom',
    tpl: ['<div class="', Ext.baseCSSPrefix, 'legend-container">', '<tpl for=".">', '<tpl if="name !== \'\'"><div class="', Ext.baseCSSPrefix, 'legend-item">', '<span ', 'class="', Ext.baseCSSPrefix, 'legend-item-marker {[ values.disabled ? Ext.baseCSSPrefix + \'legend-inactive\' : \'\' ]}" ', 'style="background:{mark};">', '</span>{name}', '</div>', '</tpl>', '</tpl>', '</div>']
}

我已经采用默认的Ext JS一个添加添加了一个tpl，如果要检查名称是否为空字符串。

Answer 3

通过cleanData函数传递数据

var data = [
    {"name": "A-0", "value": 18.34, "length": 30},
    {"name": "A-1", "value": 2.67, "length": 35},
    {"name": "", "value": 0, "length": 0}
];
var storeA = Ext.create('Ext.data.Store', {
    fields: ['name', 'value', 'length'],
    data: cleanData(data)
});

var donut = Ext.create('Ext.chart.PolarChart', {
    title: 'Test',
    animation: true,
    width: 300,
    height: 300,
    renderTo: Ext.getBody(),

    store: storeA,

    legend: {
        docked: 'bottom'
    },

    series: [{
        type: 'pie',
        angleField: 'value',
        lengthField: 'length',
        colors: ["#9aff4f", "#35b4e3", "#ffb400"],
        donut: 20,
        label: {
            field: 'name',
            display: 'inside'
        },
        highlight: true
    }]
});

Ext.create('Ext.form.Label', {
    html: 'Is it possible to "disable" (make invisible) items that have no name or 0 as value?<br/>' +
          'For example after A-1, I have an "empty" record in my store, but I don\'t want it to be displayed ;)',
    width: 300,
    height: 300,
    renderTo: Ext.getBody()
});

function cleanData(data) {
  var result = [];
  for (var i=0; i<data.length; i++) {
    if (data[i].value !== 0) {
      result.push(data[i]);
    }
  }
  return data;
}

EXTJS 5不在图表中显示空记录

3 个答案: