2014-01-13 44 views
0

在這裏你可以看到一個使用graphael創建的圖表。 http://jsfiddle.net/aNJxf/4/怪異圖表最大軸x值(真正的挑戰)

正確顯示y軸。

第一個y值爲0.03100,y軸的最大值爲0.031 如果我們將該值更改爲0.03104,則y軸的最大值變爲1.03,現在我們所有的點都位於底部。 如果我們再添加一個0.00001,使得該值爲0.03105,那麼軸線y的最大值爲0.531,現在我們的點顯示在圖表的位置錯誤的錯誤位置上。 當graphael計算最大y軸值時,似乎出現了問題。

爲什麼會發生這種情況?我們如何解決這個問題?

,我已經貼有該代碼是

var r = Raphael("holder"), 
txtattr = { font: "12px sans-serif" }; 

var x = [], y = [], y2 = [], y3 = []; 

for (var i = 0; i < 1e6; i++) { 
    x[i] = i * 10; 
    y[i] = (y[i - 1] || 0) + (Math.random() * 7) - 3; 
} 
var demoX = [[1, 2, 3, 4, 5, 6, 7],[3.5, 4.5, 5.5, 6.5, 7, 8]]; 
var demoY = [[12, 32, 23, 15, 17, 27, 22], [10, 20, 30, 25, 15, 28]]; 

var xVals =[7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58]; 
var yVals = [0.03100,0.02259,0.02623,0.01967,0.01967,0.00788,0.02217,0.0137,0.,0.01764,0.0131,0.00942,0.0076,0.01463,0.02882,0.02093,0.02502,0.01961,0.01551,0.02227,0.0164,0.0191,0.00774,0.03076,0.0281,0.01338,0.02763,0.02334,0.00557,0.00023,0.01523,0.0263,0.03077,0.02404,0.02492,0.01954,0.01954,0.02337,0.01715,0.02271,0.00815,0.01343,0.00985,0.01837,0.00749,0.02967,0.01156,0.0083,0.00209,0.01538,0.01348,0.01353]; 

//r.text(160, 10, "Symbols, axis and hover effect").attr(txtattr); 
var lines = r.linechart(10, 10, 300, 220, xVals, yVals, { nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true }) 
    .hoverColumn(function() { 
     this.tags = r.set(); 

     for (var i = 0, ii = this.y.length; i < ii; i++) { 
      this.tags.push(r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }])); 
      } 
     }, function() { 
      this.tags && this.tags.remove(); 
      }); 

lines.symbols.attr({ r: 3 }); 

感謝

+0

一個類似的問題被問及並回答[這裏](http://stackoverflow.com/questions/21095968/why-the-following-data-produce-wrong-chart/21117316#21117316) – Legisey

回答

0

對不起,我不是真正熟悉gRaphael,我卻發現你轉換成yVals整數(乘以每個通過1e5)似乎擺脫了你的尷尬行爲的圖表。

這表明它可能與gRaphael用來查找最大軸值的算法有關(如您在your related question中詢問的那樣),當您的值爲十進制小數值(並更改爲更有效數字時)。

我知道float精度存在固有的問題,但我不能確定這適用於您的案例,或者您的值足夠低以考慮此問題。

不是最好的解決方法,但如果它對您來說可行,您可以將yValues顯示爲大一個數量級,並提醒觀衆他們實際上比展示的要小。例如,您的圖表可能會從0到3100,並提醒您的觀衆的比例爲scale * 1e-5