2017-11-13 13 views
0

저는 ExtJS에 익숙해 졌기 때문에 가능한지 모르겠습니다. Google은 차트에 툴팁을 만드는 방법에 대해서만 응답하므로 ...ExtJS classic - 차트를 툴팁에 삽입하십시오.

사용자가 셀에 마우스를 올려 놓으면 표시되는 툴팁으로 그리드를 만들어야합니다. 이 툴팁에서는이 그리드의 저장소 (이 부분은 내가 만든 것임)와 동일한 저장소를 기반으로하는 PolarChart에 기반한 사용자 지정 정보 여야합니다.

그것은 내가 beforeshow 기능에 tip.update() 내부 PolarChart을 만들려고했습니다

Name:   first 
Date start: 10-02-2017 
Date end:  12-02-2017 
*It is the PolarChart* 

처럼해야하지만 그것은 단지 대신 렌더링 차트의 Object(Object)를 반환합니다.

변수를 정의하여 차트를 렌더링하고 tip.update(var.render())과 같이 렌더링하려고 시도했지만 Uncaught TypeError: Cannot read property 'dom' of undefined 오류가 발생합니다.

변수 renderTo을 변수 tip 또는 Ext.getCmp('tipID')으로 설정하려고해도 오류가 발생합니다.

동적으로 생성되기 때문에 도구 설명의 DOM 노드에 연결할 수 없다고 생각합니다.

내 문제를 해결하는 방법은 무엇입니까?

+0

다른 방법을 찾아야합니다. 'showBy' 또는'showAt'를 사용하여 차트를 포함하는 창을 렌더링 할 수 있습니다 ... – Alexander

답변

1

격자 itemmouseenteritemmouseleave에 동적 tooltip 만들기를 사용할 수 있습니다.

작은 sencha fiddle 데모를 만들었습니다.

function createToolTip(target, data) { 
    return Ext.create('Ext.tip.ToolTip', { 
     // target: target.id, 
     title: 'Company Overview using pie chart', 
     width: 200, 
     height: 200, 
     items: [{ 
      xtype: 'polar', 
      width: 180, 
      height: 180, 
      theme: 'green', 
      interactions: ['rotate', 'itemhighlight'], 
      store: { 
       fields: ['name', 'value'], 
       data: data 
      }, 
      series: { 
       type: 'pie', 
       highlight: true, 
       angleField: 'value', 
       label: { 
        field: 'name', 
        display: 'inside' 
       }, 
       donut: 30 
      } 
     }] 
    }).showBy(target); 
} 

Ext.create('Ext.grid.Panel', { 
    renderTo: Ext.getBody(), 
    store: store, 
    title: 'Company Data', 
    width: '100%', 
    columns: [{ 
     text: 'Company', 
     flex: 1, 
     sortable: true, 
     dataIndex: 'company' 
    }, { 
     text: 'Price', 
     width: 90, 
     sortable: true, 
     dataIndex: 'price', 
     align: 'right', 
     renderer: function (v) { 
      return Ext.util.Format.usMoney(v) 
     } 
    }, { 
     text: 'Revenue', 
     width: 110, 
     sortable: true, 
     align: 'right', 
     dataIndex: 'revenue %', 
     renderer: perc 
    }, { 
     text: 'Growth', 
     width: 100, 
     sortable: true, 
     align: 'right', 
     dataIndex: 'growth %', 
     renderer: perc 
    }, { 
     text: 'Product', 
     width: 110, 
     sortable: true, 
     align: 'right', 
     dataIndex: 'product %', 
     renderer: perc 
    }, { 
     text: 'Market', 
     width: 100, 
     sortable: true, 
     align: 'right', 
     dataIndex: 'market %', 
     renderer: perc 
    }], 

    listeners: { 
     itemmouseenter: function (grid, record, item, index, e, eOpts) { 
      //If tooltip is already created then first destroy then create new. 
      if (grid.customToolTip) { 
       Ext.destroy(grid.customToolTip); 
      } 
      grid.customToolTip = createToolTip(item, [{ 
       name: 'Revenue', 
       value: record.get('revenue %') 
      }, { 
       name: 'Growth', 
       value: record.get('growth %') 
      }, { 
       name: 'Product', 
       value: record.get('product %') 
      }, { 
       name: 'Market', 
       value: record.get('market %') 
      }]); 
     }, 
     itemmouseleave: function (grid, record, item, index, e, eOpts) { 
      //destory toolTip on mouse out 
      if (grid.customToolTip) { 
       Ext.destroy(grid.customToolTip); 
      } 
     } 
    } 
}) 
+0

고맙습니다, 이것이 꿈입니다! – Scilef

+0

대단히 환영합니다. –