EXTJS 4.2.2在數據點處顯示值的折線圖

Question

我正在使用extjs 4.2.2圖表。我的要求是顯示折線圖也希望顯示節點中的值。在我看到的一些帖子中，可以使用Series標籤完成。不知何故，它不顯示節點或數據點中的值。以下是圖表代碼。

items : [ { 
    xtype : 'chart', 
    // renderTo : Ext.getBody(), 
    width : 1600, 
    animate : true, 
    height : 400, 
    shadow : true, 
    // theme: 'Category2', 
    store : 'SWeatherPoint', 
    axes : [ { 
     title : 'Temperature', 
     type : 'Numeric', 
     position : 'left', 
     fields : [ 'temperature' ], 
     minimum : 0, 
     maximum : 100, 
     minorTickSteps : 1, 
     // grid: true 
     grid : { 
      odd : { 
       opacity : 1, 
       fill : '#ddd', 
       stroke : '#bbb', 
       'stroke-width' : 0.5 
      } 
     } 
    }, { 
     title : 'Day of the Month', 
     type : 'Time', 
     position : 'bottom', 
     fields : [ 'date' ], 
     dateFormat : 'M d', 
     constrain : true, 
     fromDate : new Date('1/1/07'), 
     toDate : new Date('1/30/07'), 
     grid : true 
    } ], 
    series : [ { 
     type : 'line', 
     xField : 'date', 
     yField : 'temperature', 
     highlight : { 
      size : 7, 
      radius : 7 
     }, 
     axis : 'left', 
     smooth : true, 
     fill : true, 
     label : { 
//    display : 'under', // or 'rotate' 
      field : 'temperature', 
      renderer : function(label, storeItem, item, i, display,   animate, index) { 
       console.log(this); 
       console.log(item.get('temperature')+''+item+'' + i+''+display+ ''+index); 
       return String(item.get('temperature')); 
      } 


     }, 
     tips : { 
      trackMouse : true, 
      width : 200, 
      height : 28, 
      renderer : function(storeItem, item) { 
       this.setTitle(storeItem.get('temperature') + ': ' 
         + storeItem.get('date') + ' views'); 
      } 
     }, 
     style : { 
      fill : '#18428E', 
      stroke : '#18428E', 
      'stroke-width' : 3, 
      'stroke-dasharray' : 10 
     // You need to add this! 
     }, 
     markerConfig : { 
      type : 'circle', 
      size : 4, 
      radius : 4, 
      'stroke-width' : 0, 
      fill : '#18428E', 
      stroke : '#18428E' 
     } 
    } ] 

如果有人能指出問題，這將會有所幫助。

感謝， 阿米特

Answer 1

看起來你只是缺項，並更改到的setTitle的setText。

tips: { 
     trackMouse: true, 
     layout: 'fit', 
     items: [{ 
      xtype: 'label' 
     }], 
     renderer: function (storeItem, item) { 
      this.down('label').setText(storeItem.get('temperature') + Ext.util.Format.date(storeItem.get('date'), 'm/d/Y') + ' views'); 
     } 
    }, 

編輯：HighCharts的添加例子：

這裏就是我花了yahoo.com的歷史股價，並提出了股票圖表從他們的例子。

var chart = Ext.create('Chart.ux.Highcharts', { 
itemId: 'stockChartH', 
axes: [{ 
type: 'Numeric', 
position: 'left', 
fields: ['Close'], 

label: { 
    renderer: Ext.util.Format.numberRenderer('0,0') 
}, 
title: 'Price', 
grid: true, 
minimum: 0 
}, { 
type: 'Category', 
position: 'bottom', 
fields: ['Date'], 
title: 'Date', 
label: { 
    renderer: function (value, label, storeItem, item, i, display, animate, index) { 
     return Ext.util.Format.date(value, 'm/d'); 
    } 
} 

}], 

series:[{ 
    dataIndex: 'Close', 
    name: 'Stock Price', 
    tips: { 
     trackMouse: true, 
     layout: 'fit', 
     items: [{ 
      xtype: 'label' 
     }], 
     renderer: function (storeItem, item) { 
      this.down('label').setText(Ext.util.Format.date(storeItem.get('Date'),  'm/d/Y') + ': ' + storeItem.get('Close') + ' Closing Price'); 
     } 
    } 
}], 
xField: 'Date', 
store: 'yahoo.yahooHistorical_s', 
chartConfig: { 
    chart: { 
     type: 'spline', 

    }, 
     title: { 
     text: ' ' 
    }, 

    xAxis: { 
     type: "date", 
     labels: { 
      formatter: function (value, label, storeItem, item, i, display, animate, index) { 
       return Ext.util.Format.date(value, 'm/d'); 
         }      
        }, 
     plotLines: [{ 
      color: '#FF0000', 
      width: 5, 
      title: 'test', 
      value: 'mar', 

     }] 
    }, 
      yAxis: { 
     title: { 
      text: 'Price' 
     } 
    } 
} 
});