日付の簡単な折れ線グラフ？

私は、線グラフ上に3つの点を描画するのにExtJS 4を使用しようとしていますが、ポイントは表示されません。コンソールでJavascriptエラーが発生していません。誰かが私が間違っていることを教えてもらえますか？日付の簡単な折れ線グラフ？

 
var chartArray = [ 
    {"date1":"2012-01-22", "count":1}, 
    {"date1":"2012-01-23", "count":2}, 
    {"date1":"2012-01-24", "count":3} 
]; 

Ext.onReady(function() { 

    var store1 = new Ext.data.ArrayStore({ 
     fields: [ 
      {name: 'date1', type: 'date', dateFormat: 'Y-m-d'}, 
      {name: 'count', type: 'data'} 
     ], 
     data: chartArray 
    }); 

    Ext.create('widget.panel', { 
     width: 500, 
     height: 400, 
     renderTo: 'chart1', 
     layout: 'fit', 
     items: { 
      xtype: 'chart', 
      animate: true, 
      store: store1, 
      insetPadding: 30, 
      legend: { 
       position: 'bottom' 
      }, 
      axes: [ 
       { 
        type: 'Numeric', 
        minimum: 0, 
        maximum: 10, 
        position: 'left', 
        fields: ['date1'], 
        title: false, 
        grid: { 
         stroke: '#0F0', 
         fill: '#0F0', 
         'stroke-width': 5 

        }, 
        label: { 
         font: '10px Arial', 
         fill: '#80858D', 
         color: '#FFFFFF', 
         renderer: function(val) { 
          return val; 
         } 

        } 
       }, 
       { 
        type: 'Category', 
        position: 'bottom', 
        color: '#FFFFFF', 
        grid: false, 
        fields: ['date1'], 
        fill: '#0F0', 
        title: 'Daily Count', 
        label: { 
         font: '11px Arial', 
         color: '#FFFFFF', 
         fill: '#80858D', 
         rotate: {degrees: 315}, 
         renderer: function(date) { 
          console.log("Date: " + date); 
          return date; 
         } 
        } 
       } 
      ], 
      series: [ 
       { 
        type: 'line', 
        axis: 'left', 
        xField: 'date1', 
        yField: 'count', 
        style: { 
         fill: '#f47d23', 
         stroke: '#f47d23', 
         'stroke-width': 3 
        }, 
        markerConfig: { 
         type: 'circle', 
         size: 2, 
         radius: 2, 
         'stroke-width': 0, 
         fill: '#38B8BF', 
         stroke: '#38B8BF' 
        } 
       } 
      ] 
     } 
    }); 
});

ここでExtJSのないHTMLが含まれます：

 
<!doctype html> 
<html> 
<head> 
<title>Line</title> 
<script type="text/javascript" src="line.js"></script> 
</head> 
<body> 
<div id="chart1"></div> 
</body> 
</html>

出典

2012-01-24 Anonymous

まず、ArrayStoreをJsonStoreに変更すると、コードが機能します。

しかし、とにかくExtJs4でカテゴリ軸や時間軸を使用することはお勧めしません。 Senchaの恥を、彼らはまだそれを安定して得ることができません。私は約2週間、単純な折れ線グラフを時間X軸で実装しようとすると成功しません。

私はここで解決策を見つけました - 時間軸/カテゴリ軸を数値軸で置き換えて、日付をタイムスタンプの形式で読み込みます。タイムスタンプは常に日付文字列（ラベルとヒント）に変換できます。私は今このアプローチに満足しており、チャートははるかに速くレンダリングされます！

出典

2012-01-25 08:23:50

あなたは素晴らしいです。数値は時間が私のために働く..それは時間軸よりも優れています.. – Gugan

のExt JSの4.0.7は、時間軸に問題があります。それはあなたの場合の問題かもしれません。報告されたのはhereです。たぶん、v4.0.2で試してみてください。

出典

2012-01-24 20:20:59 Marko

日付の簡単な折れ線グラフ？

答えて

関連する問題