jQuery.flotで素数計数関数の値をグラフ表示するデモ:
JSでグラフ描画(flotで素数計数関数を表示)
http://sourcecode-student.study-tips.info/demo/2015_03_jquery_flot/
工夫した点:
- x軸およびy軸にラベルをつける機能がflotには標準で存在しないので,軸のメモリの値をフォーマットする関数の部分で,メモリの最後の値にラベルを付与するようにしている。
利用したライブラリ:
- jQuery.flot
- IntegerProblem.js :素数計数関数を利用
「JavaScriptで整数問題を記述するライブラリ」を独立させてちょっと改良 - ソフトウェア勉強ログとサンプルコード
http://source-code-student.hatenablog.jp/entry/20150129/p2
- IntegerProblem.js
ソースコード
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JSでグラフ描画(flotで素数計数関数を表示)</title> <!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <!-- flot : http://www.flotcharts.org/ からダウンロード --> <script src="jquery.flot.min.js"></script> <!-- 整数問題を記述するライブラリ : http://source-code-student.hatenablog.jp/entry/20150129/p2 からダウンロード --> <script src="IntegerProblem.js"></script> </head> <body> <h3>jQuery.flotで素数計数関数をグラフ描画</h3> <script> $(function() { // 素数計数関数の値 var prime_counts = []; // 素数計数関数の近似値 var x_per_logx = []; for( var i = 2; i <= 10000; i ++ ){ // それぞれ値を計算して格納 prime_counts.push([ i, prime_counting_function(i) ]); x_per_logx.push([ i, i / Math.log(i) // x = 1 で発散するので注意 ]); } // flotで描画 var plot = $.plot("#placeholder", [ { data : prime_counts, label : "素数の個数" }, { data : x_per_logx, label : "素数計数関数の近似値" } ], { xaxis : { tickFormatter: function(val, axis) { return val < axis.max ? val : val + "<br>探索範囲"; } }, yaxis : { tickFormatter: function(val, axis) { return val < axis.max ? val : "素数の個数<br>" + val; } }, grid : { hoverable : true, clickable : true } }); // グラフ上にホバーして現れるツールチップボックス要素 $("<div id='tooltip'></div>").css({ position : "absolute", display : "none", // 最初は消しておく border : "1px solid #fdd", padding : "2px", "background-color" : "#fee", opacity : 0.80 }).appendTo("body"); // グラフ領域上でのイベントを定義 $("#placeholder").bind("plothover", function (event, pos, item) { if (item) { var x = item.datapoint[0]; var y = item.datapoint[1]; $("#tooltip") .html( // この座標での値を表示 item.series.label + " = " + y.toFixed(2) + " ( x = " + x + " )" ) .css({ top : item.pageY+5, left : item.pageX+5 }) .fadeIn(200); // 現れる } else { $("#tooltip").hide(); } }); $("#placeholder").bind("plotclick", function (event, pos, item) { if (item) { plot.highlight(item.series, item.datapoint); } }); }); </script> <div id="placeholder" class="placeholder"></div> <style> /* flotは縦横の大きさを指定しないと描画できない */ .placeholder { height: 450px; width: 850px; } </style> </body> </html>
参考にしたURL
flotの基礎的な使い方:
Flotでグラフ作成 折れ線グラフ・棒グラフ | Arti
http://arti.jp.net/blog/archives/299/
JavaScript で,クリックした座標に点を追加できるグラフチャートを描画する方法 (jQuery のプラグイン jquery.sparklines / jquery.flotの使い方)
http://d.hatena.ne.jp/language_and_engineering/20081120/1227114053
描画領域の端っこにまとめて凡例を表示する方法:
Flot Chart Custom Legend example - Pure Example
http://www.pureexample.com/jquery-flot/custom-legend.html
- $.plot($("#flotcontainer"), [ {label:"data1", data:data1}, {label:"data2", data:data2}, {label:"data3", data:data3} ], options );
x軸やy軸の先端に,軸の名称ラベルを表示する方法:
javascript - Axis label in Flot - Stack Overflow
http://stackoverflow.com/questions/5563270/axis-label-in-flot
- i'm using this workaround: yaxis: { tickFormatter: function(val, axis) { return val < axis.max ? val.toFixed(2) : "CZK/l";} }
グラフ上の点にマウスホバーおよびクリックするサンプル:
Flot Examples: Interactivity
http://www.flotcharts.org/flot/examples/interacting/
- Try pointing and clicking on the points.
素数計数関数の近似値:
素数定理 - Wikipedia
http://ja.wikipedia.org/wiki/%E7%B4%A0%E6%95%B0%E5%AE%9A%E7%90%86#.CF.80.28x.29.2C_x_.2F_ln_x.2C_li.28x.29_.E3.81.AE.E8.A1.A8
- ln x で近似できるということを意味する。こちらのほうが近似精度は少し悪くなるが計算上扱い易い。これを \frac{\pi (x)}{x} \sim \frac{1}{\ln x} と変形すれば、x 以下での素数の割合が 1ln x で近似できることが分かる
X以下の数の因数の数の合計、素因数の数の合計をグラフにしてみた - 物置
http://monooki.ldblog.jp/archives/39473800.html