Morris JS kullanırken grafikte göstermek istediğiniz verilerin Y aralıkları sabit değil değişken ise bazı sorunlar yaşayabiliyorsunuz. Ymax ve Ymin değerlerini kendiniz elde etmeniz gerekiyor. Bunun içinde yapmanız gereken stackoverflow’da bir vatandaşın yazdığı şu fonksiyonu kullanmak.
I could find nothing else to manage the y-axis in Morris so I built my own function to find min and max:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<span class="kwd">function</span><span class="pln"> min_and_max</span><span class="pun">(</span><span class="pln">json_data</span><span class="pun">)</span> <span class="pun">{</span> <span class="kwd">var</span><span class="pln"> min </span><span class="pun">=</span> <span class="typ">Number</span><span class="pun">.</span><span class="pln">MAX_VALUE</span><span class="pun">;</span> <span class="kwd">var</span><span class="pln"> max </span><span class="pun">=</span> <span class="typ">Number</span><span class="pun">.</span><span class="pln">MIN_VALUE</span><span class="pun">;</span> <span class="kwd">for</span> <span class="pun">(</span><span class="kwd">var</span><span class="pln"> data_key </span><span class="kwd">in</span><span class="pln"> json_data</span><span class="pun">)</span> <span class="pun">{</span> <span class="kwd">var</span><span class="pln"> entry </span><span class="pun">=</span><span class="pln"> json_data</span><span class="pun">[</span><span class="pln">data_key</span><span class="pun">]</span> <span class="kwd">for</span><span class="pun">(</span><span class="kwd">var</span><span class="pln"> key </span><span class="kwd">in</span><span class="pln"> entry</span><span class="pun">)</span> <span class="pun">{</span> <span class="kwd">var</span><span class="pln"> x </span><span class="pun">=</span><span class="pln"> entry</span><span class="pun">[</span><span class="pln">key</span><span class="pun">];</span> <span class="kwd">if</span> <span class="pun">(!</span><span class="pln">isNaN</span><span class="pun">(</span><span class="pln">x</span><span class="pun">))</span> <span class="pun">{</span> <span class="com">// to avoid using date object</span> <span class="kwd">if</span> <span class="pun">(</span><span class="pln">x </span><span class="pun"><</span><span class="pln"> min</span><span class="pun">)</span> <span class="pun">{</span><span class="pln">min </span><span class="pun">=</span><span class="pln"> x</span><span class="pun">;}</span> <span class="kwd">else</span> <span class="kwd">if</span> <span class="pun">(</span><span class="pln">x </span><span class="pun">></span><span class="pln"> max</span><span class="pun">)</span> <span class="pun">{</span><span class="pln">max </span><span class="pun">=</span><span class="pln"> x</span><span class="pun">;}</span> <span class="pun">}</span> <span class="pun">}</span> <span class="pun">}</span> <span class="kwd">return</span> <span class="pun">{</span><span class="str">'min'</span><span class="pun">:</span><span class="pln"> min</span><span class="pun">,</span> <span class="str">'max'</span><span class="pun">:</span><span class="pln"> max</span><span class="pun">};</span> <span class="pun">}</span> |
So I could use it when creating the chart like:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<span class="kwd">var</span><span class="pln"> limits </span><span class="pun">=</span><span class="pln"> min_and_max</span><span class="pun">(</span><span class="pln">data</span><span class="pun">);</span> <span class="kwd">var</span><span class="pln"> keys </span><span class="pun">=</span> <span class="typ">Object</span><span class="pun">.</span><span class="pln">keys</span><span class="pun">(</span><span class="pln">data</span><span class="pun">[</span><span class="lit">0</span><span class="pun">]);</span><span class="pln"> keys </span><span class="pun">=</span><span class="pln"> keys</span><span class="pun">.</span><span class="pln">filter</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">){</span><span class="kwd">return</span><span class="pln"> e</span><span class="pun">!==</span><span class="str">'date'</span><span class="pun">});</span> <span class="kwd">new</span> <span class="typ">Morris</span><span class="pun">.</span><span class="typ">Line</span><span class="pun">({</span><span class="pln"> element</span><span class="pun">:</span><span class="pln"> element</span><span class="pun">,</span><span class="pln"> data</span><span class="pun">:</span><span class="pln"> data</span><span class="pun">,</span><span class="pln"> xkey</span><span class="pun">:</span> <span class="str">'date'</span><span class="pun">,</span><span class="pln"> ykeys</span><span class="pun">:</span><span class="pln"> keys</span><span class="pun">,</span><span class="pln"> labels</span><span class="pun">:</span><span class="pln"> keys</span><span class="pun">,</span><span class="pln"> ymin</span><span class="pun">:</span><span class="pln"> limits</span><span class="pun">[</span><span class="str">'min'</span><span class="pun">],</span><span class="pln"> ymax</span><span class="pun">:</span><span class="pln"> limits</span><span class="pun">[</span><span class="str">'max'</span><span class="pun">],</span><span class="pln"> hideHover</span><span class="pun">:</span> <span class="kwd">true</span> <span class="pun">});</span> |
Kaynak : https://stackoverflow.com/questions/33946724/how-to-set-smart-morris-js-line-chart-y-boundaries
İlk Yorumu Siz Yapın