2010-09-29 5 views
1

J'utilise poste ne dessiner des graphiques dans le navigateur, je rencontre un problème:problème graphique ExtJS

Je veux dessiner deux lignes dans un graphique, donc j'utiliser le ColumnChart, voici mes données:

var store = new Ext.data.JsonStore({ 
    fields:['name', 'visits', 'views'], 
    data: [ 
     {name:'Jul 07', visits: 245, views: 3000000}, 
     {name:'Aug 07', visits: 240, views: 3500000}, 
     {name:'Sep 07', visits: 355, views: 4000000}, 
     {name:'Oct 07', visits: 375, views: 4200000}, 
     {name:'Nov 07', visits: 490, views: 4500000}, 
     {name:'Dec 07', visits: 495, views: 5800000}, 
     {name:'Jan 08', visits: 520, views: 6000000}, 
     {name:'Feb 08', visits: 620, views: 7500000} 
    ] 
}); 

Depuis la visite des données est beaucoup moins que des vues.

Donc, la ligne qui représente la visite est trop proche du xaxis, y a-t-il une idée?

alt text


Merci pour votre réponse, je décide de les faire la même échelle. BTW, j'ai une autre question, espérons que vous pouvez donner quelques suggesion:

alt text

Répondre

0

Pour autant que je peux voir, il y a deux options: 1. Ajouter un second axe Y, avec une échelle différente 2 . échelle les valeurs plus élevées vers le bas

ExtJS charts- à ma connaissance ne marche pas offrir la possibilité d'ajouter un deuxième axe, mais il y a arounds de travail (voir http://www.sencha.com/forum/showthread.php?72557-Ext-JS-Charts-Second-Y-Axis-Scale)

par conséquent, la meilleure façon serait de diviser simplement t Les plus grandes valeurs, disons 10 000, permettent d'aligner les deux échelles, puis de noter qu'elles sont en milliers.

1

Pour créer yAxis avec différentes échelles dans ExtJs4, vous pouvez utiliser les axes gauche et droit.

xtype: 'chart', 
width: 400, 
height: 300, 
store: myStore, 
axes: [ 
    { 
     //title: 'Size', 
     type: 'Numeric', 
     position: 'left', 
     fields: ['sizeInBytes'], 
     minimum: 0 
    },{ /// NEW yAxis Scale /// 
     //title: 'Run Time', 
     type: 'Numeric', 
     position: 'right', 
     fields: ['runTimeMin'], 
     minimum: 0 
    },{ 
     //title: 'Date', 
     type: 'Time', 
     position: 'bottom', 
     fields: ['startTime'], 
     dateFormat: 'm/d/y h:i A' 
    } 
], 
series: [ 
    { 
     type: 'column', 
     axis: 'left', 
     xField: 'startTime', 
     yField: 'sizeInBytes' 
    },{ /// Specify the Axis and data field to use /// 
     type: 'line', 
     axis: 'right',// <---- 
     xField: 'startTime', 
     yField: 'runTimeMin' // <---- 
    } 
]