2011-12-14 64 views
1

我想在EXTJS 3面板上實現帶有日期時間x軸的Highchart線圖,所以我使用了extjs適配器和Sencha論壇上提供的所有東西。 我正面臨一個非常奇怪的問題。我x軸上所有的標記都在同一個位置,以便它們重疊,如下所示:Highcharts和EXTJS 3:x軸重疊的標籤

See graph

這裏是我一起工作的代碼:

var store = new Ext.data.JsonStore({ 
     url: '/graph', 
     fields: [ 
      {name: 'datamesura', type: 'int'}, 
      {name: 'despl_hor', type: 'float'}, 
      {name: 'despl_ver', type: 'float'} 
     ], 
     root: 'dades' 
    }); 

    var datastore_task = { 
     run: function() { 
     store.load(); 
     } 
    }; 

    Ext.TaskMgr.start(datastore_task); 

    Ext.QuickTips.init(); 
    var chart; 

    chart = new Ext.ux.HighChart({ 
     series: [{ 
       type: 'spline', 
       dataIndex: 'despl_hor', 
       name: 'Desplaçament horitzontal' 
      },{ 
       type: 'spline', 
       dataIndex: 'despl_ver', 
       name: 'Desplaçament vertical' 
      }], 
     height: 500, 
     width: 700, 
     store: store, 
     animShift: true, 
     xField: 'datamesura', 
     chartConfig: { 
      chart: { 
       marginRight: 210, 
       marginBottom: 120, 
       zoomType: 'xy' 
      }, 
      toolbar: { 
       itemStyle: { 
        color: '#4572A7', 
        cursor: 'pointer' 
       }, 
       layout: { 
        xPosition: 'right', 
        yPosition: 'top', 
        x: 0, 
        y: -10 
       } 
      }, 
      title: { 
       text: 'Prismes', 
       x: -20 
      }, 
      subtitle: { 
       text: 'Desplaçament', 
       x: -20 
      }, 
      xAxis: [{ 
        title: { 
         text: 'Data', 
         margin: 20 
        }, 
        labels: { 
         rotation: 270, 
         y: 35 
        }, 
        type: 'datetime' 
       }], 
      yAxis: [{ 
       title: { 
        text: 'Valor' 
       }, 
       plotLines: [{ 
         value: 0, 
         width: 1, 
         color: '#808080' 
        }] 
      }], 
      legend: { 
       layout: 'vertical', 
       align: 'right', 
       verticalAlign: 'top', 
       x: 0, 
       y: 100, 
       borderWidth: 0 
      } 
     } 
    }); 

    new Ext.Window({ 
     title: 'Example', 
     layout: 'anchor', 
     items: [chart] 
    }).show(); 

圖和時間尺度是正確渲染。當我翻轉任何點時,即使日期在工具提示中也是正確的。但正如你所看到的,所有的標籤都在x軸的開始。

數據從一個JSON文件來在這樣的格式:

{"dades":[{"datamesura":1305158400000,"despl_hor":0,"despl_ver":0},{"datamesura":1305590400000,"despl_hor":0.85509233483876,"despl_ver":0.7406906575},{"datamesura":1305763200000,"despl_hor":0.40065251939804,"despl_ver":0.3806685951},{"datamesura":1306195200000,"despl_hor":1.3354238226121,"despl_ver":0.3883164125},{"datamesura":1306368000000,"despl_hor":1.2300886025811,"despl_ver":0.3028934962},{"datamesura":1306800000000,"despl_hor":0.76491207579695,"despl_ver":0.7382504417},{"datamesura":1306972800000,"despl_hor":0.97067811781249,"despl_ver":0.3934538156},{"datamesura":1307404800000,"despl_hor":0.99251776941272,"despl_ver":0.1344402012},{"datamesura":1307577600000,"despl_hor":1.7576987265171,"despl_ver":-0.0731718418},{"datamesura":1308009600000,"despl_hor":1.7982043839063,"despl_ver":0.8377618489},{"datamesura":1308182400000,"despl_hor":1.6815243145135,"despl_ver":0.6510250418},{"datamesura":1308614400000,"despl_hor":1.4625103263909,"despl_ver":0.2423211682},{"datamesura":1308787200000,"despl_hor":1.059558961408,"despl_ver":0.9443423224},{"datamesura":1309219200000,"despl_hor":1.8495061606277,"despl_ver":0.7814450066},{"datamesura":1309392000000,"despl_hor":1.9162507008479,"despl_ver":0.6051177109},{"datamesura":1309824000000,"despl_hor":1.7213552221723,"despl_ver":0.6680561831},{"datamesura":1309996800000,"despl_hor":1.9444381633778,"despl_ver":0.8635180524},{"datamesura":1310428800000,"despl_hor":1.6798176421267,"despl_ver":0.8274643529},{"datamesura":1310601600000,"despl_hor":1.4467543786006,"despl_ver":0.4695790538},{"datamesura":1311033600000,"despl_hor":1.4726130928727,"despl_ver":0.2477731064},{"datamesura":1311206400000,"despl_hor":1.2836033705939,"despl_ver":0.2656530857},{"datamesura":1311638400000,"despl_hor":1.5078416389993,"despl_ver":0.3320340535},{"datamesura":1312243200000,"despl_hor":1.9332533948761,"despl_ver":0.9397637894},{"datamesura":1312848000000,"despl_hor":1.2659382917425,"despl_ver":0.0425702553},{"datamesura":1313452800000,"despl_hor":1.2477477249428,"despl_ver":0.8257942379},{"datamesura":1314057600000,"despl_hor":1.8118509156661,"despl_ver":0.4792052981},{"datamesura":1314662400000,"despl_hor":1.918020654138,"despl_ver":0.5906438039},{"datamesura":1315267200000,"despl_hor":1.7023765324099,"despl_ver":0.8507942294},{"datamesura":1315872000000,"despl_hor":1.973909305414,"despl_ver":0.9492018485},{"datamesura":1316476800000,"despl_hor":1.932831196975,"despl_ver":0.8957622496},{"datamesura":1317081600000,"despl_hor":1.8232818443949,"despl_ver":1.0017163985},{"datamesura":1317686400000,"despl_hor":0.73874846050601,"despl_ver":0.5016692077},{"datamesura":1318896000000,"despl_hor":0.98500785814124,"despl_ver":0.2459143327},{"datamesura":1320192000000,"despl_hor":1.8171299009977,"despl_ver":0.695824387},{"datamesura":1321401600000,"despl_hor":1.0247267158126,"despl_ver":0.9220291425},{"datamesura":1322524800000,"despl_hor":1.7464007827529,"despl_ver":0.7178103147},{"datamesura":1323734400000,"despl_hor":1.8637498241985,"despl_ver":0.7515986697}]} 

沒有人有線索?即使我非常喜歡Highcharts,我即將放棄並嘗試另一個圖表庫。

回答

0

這似乎是一個問題w/x軸的跨度。我對ExtJS適配器並不熟悉,但我會建議您考慮以下任何一種:

  1. 您的選項可能指向錯誤的字段嗎?
  2. 使用series.pointStart/series.pointInterval controls
  3. 使用X軸setExtremes controls