Können wir ein Bild in der Extjs Scatter Chart-Serie hinzufügen?

Question

Ich konnte in ExtJs verstreutem Wagen sehen, dass wir verschiedene Markerkonfigurationen verwenden konnten, um Kreuz, Kreis, Quadrat usw. zu zeigen. Aber können wir stattdessen dort ein Bild oder eine Glyphe zeigen?

Answer 1

Ja, Sie können Bild zeigen statt Kreis, Quadrat usw.

Sie Ext.chart.Shape außer Kraft setzen müssen, um zusätzliche Bildtypen für Ihre Serie hinzuzufügen. Sie können diese definierten Typen in markerConfig der Serie verwenden.

Grundsätzlich müssen Sie Ihren eigenen Formtyp definieren, der mit Ext.draw.Sprite im Diagramm erstellt wird.

Hier ist ein funktionierendes Beispiel mit ExtJS 4.2.1.x:

Ext.application({ 
    name: 'Fiddle', 

    launch: function() { 
     Ext.override(Ext.chart.Shape, { 
      newPhone: function (surface, opts) { 
       return surface.add(Ext.apply({ 
        type: 'image', 
        src: 'http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Other-Phone-icon.png', 
        x: opts.x, 
        y: opts.y, 
        width: 14, 
        height: 14 
       }, opts)); 
      }, 
      oldPhone: function (surface, opts) { 
       return surface.add(Ext.apply({ 
        type: 'image', 
        src: 'https://cdn3.iconfinder.com/data/icons/communication-1/100/old_phone-512.png', 
        x: opts.x, 
        y: opts.y, 
        width: 14, 
        height: 14 
       }, opts)); 
      } 
     }); 

     var store = Ext.create('Ext.data.JsonStore', { 
      fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'], 
      data: [{ 
       'name': 'metric one', 
       'data1': 10, 
       'data2': 12, 
       'data3': 14, 
       'data4': 8, 
       'data5': 13 
      }, { 
       'name': 'metric two', 
       'data1': 7, 
       'data2': 8, 
       'data3': 16, 
       'data4': 10, 
       'data5': 3 
      }, { 
       'name': 'metric three', 
       'data1': 5, 
       'data2': 2, 
       'data3': 14, 
       'data4': 12, 
       'data5': 7 
      }, { 
       'name': 'metric four', 
       'data1': 2, 
       'data2': 14, 
       'data3': 6, 
       'data4': 1, 
       'data5': 23 
      }, { 
       'name': 'metric five', 
       'data1': 27, 
       'data2': 38, 
       'data3': 36, 
       'data4': 13, 
       'data5': 33 
      }] 
     }); 

     Ext.create('Ext.chart.Chart', { 
      renderTo: Ext.getBody(), 
      width: 600, 
      height: 600, 
      animate: true, 
      theme: 'Category2', 
      store: store, 
      axes: [{ 
       type: 'Numeric', 
       position: 'left', 
       fields: ['data2', 'data3'], 
       title: 'Sample Values', 
       grid: true, 
       minimum: 0 
      }, { 
       type: 'Category', 
       position: 'bottom', 
       fields: ['name'], 
       title: 'Sample Metrics' 
      }], 
      series: [{ 
       type: 'scatter', 
       markerConfig: { 
        type: 'oldPhone' 
       }, 
       axis: 'left', 
       xField: 'name', 
       yField: 'data2' 
      }, { 
       type: 'scatter', 
       markerConfig: { 
        type: 'newPhone' 
       }, 
       axis: 'left', 
       xField: 'name', 
       yField: 'data3' 
      }] 
     }); 
    } 
}); 

Beispiel Fiddle:https://fiddle.sencha.com/#view/editor&fiddle/29rm