extjs - 防止 Extjs 标记圈被切断

Question

我是 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 并且他们的圈子不会被切断：

标签： extjsextjs6

Answer 1

您可以使用 innerPadding 配置属性：

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