extjs 防止外部标记圆被切断

ffx8fchx  于 2022-11-05  发布在  其他
关注(0)|答案(1)|浏览(162)

我是Extjs的新手,我在学习。我还有很长的路要走,但我学到了我需要知道的东西。我的标记圆被切断了。有没有什么设置/解决方案可以用来防止这种情况?请参见图片:

我看了v6.0.0文档,不知道该用什么。代码:

Ext.onReady(() => {
  Ext.create({
    xtype: 'cartesian',
    renderTo: element, // rendered element
    height: 200,
    insetPadding: 20,
    store: {
        fields: ['name', 'amount'],
        data: [..] // data
    },
    smooth: true,
    axes: [{
      type: 'category',
      position: 'bottom',
      fields: ['name'],
      label: {
        fill: 'rgba(0,10,30,.75)',
        fontSize: 15
      },
      style : {
        strokeStyle : 'rgba(0,10,30,.2)'
      }
    }],
    series: [
    {
      type: 'line',
      fill: true,
      style: {
        fill: '#a2d5f2',
        fillOpacity: .6,
        stroke: '#00a1fd',
        strokeOpacity: .6,
      },
      tooltip: {
        trackMouse: true,   
        renderer: (tooltip, model, item) => {
            const content = item.record.data.name + ': ' + item.record.data.amount
            //tooltip.setHtml(model.get(item.field));
            tooltip.setHtml(content)
        }
      },
      xField: 'name',
      yField: 'amount',
      marker: {
        type: 'circle',
        radius: 5,
        lineWidth: 2,
        fill: '#fff',
        fillOpacity: 1,
      },
      renderer: (sprite, config, rendererData, index) => {
        let store = rendererData.store,
              storeItems = store.getData().items,
              previousRecord = storeItems[index],
              currentRecord = (index > 0 ? storeItems[index - 1] : previousRecord),
              current = currentRecord && parseFloat(currentRecord.data['amount']),
              previous = previousRecord && parseFloat(previousRecord.data['amount']),
              changes = {};

        switch (config.type) {
          case 'marker':
              if (index == 0) {
                  return null; // keep the default style for the first marker
              }
              changes.strokeStyle = (current >= previous ? '#00a1fd' : 'red');
              //changes.fillStyle = '#fff';
              //changes.fillOpacity = 1;
              //changes.lineWidth = 2;
              break;
          case 'line':
              changes.strokeStyle = (current >= previous ? '#00a1fd' : 'red');
              changes.lineWidth = 2;
              changes.fillStyle = (current >= previous ? '#a2d5f2' : 'red');
              changes.fillOpacity = (current >= previous ? 1 : .1);
              break;
        }
        return changes;
      }
    }]
  });
})

我相信Xero正在使用Ext,他们的圆圈不会中断:

uoifb46i

uoifb46i1#

您可以使用innerPadding配置属性:

Ext.onReady(() => {
  Ext.create({
    xtype: 'cartesian',
    renderTo: element, // rendered element
    height: 200,
    innerPadding: 10, // THIS PROPERTY
...
...

相关问题