날짜가있는 간단한 선형 차트?

라인 차트에서 세 점을 그리기 위해 ExtJS 4를 사용하려하지만 점이 전혀 표시되지 않습니다. 콘솔에서 Javascript 오류가 발생하지 않습니다. 아무도 내가 뭘 잘못하고 있다고 말할 수 있습니까? ExtJS를 포함하지 않고날짜가있는 간단한 선형 차트?

 
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' 
        } 
       } 
      ] 
     } 
    }); 
});

여기되는 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

내선 JS 4.0.7의 시간축에 문제가있다. 그것은 귀하의 경우에 문제가 될 수 있습니다. 보고 된 바는 here입니다. 어쩌면 그냥 작동하는지 확인하기 위해 v4.0.2로 시도해야합니다 ...

출처

2012-01-24 20:20:59 Marko

답변

관련 문제