Morris.js：jQueryとRaphaëlで美しいグラフを描くためのツール

昨日の Mozilla Hacks Weekly 号で 、 Morris.jsハイパーリンクを見た後、それを読み、読んで、喜んで、そして今、私はあなたに話します。



Morrisは、オープンソースの軽量javascript （小型化後は 3052バイト のみ ）（単純化されたBSDライセンスの下で配布）です。







時間は横軸にプロットされ、時間に依存する値は縦座標にプロットされます。 （モリスはもともと、英国の特定ブランドの車の総数を示すサイト 用に設計されたため、横軸が時間軸であることは当然です。）



グラフはマウスに反応します。マウスで示された時間に対応するポイントが膨らみ、プロンプトがそれらの近くに表示されます。



スクリプトの利点は、APIの単純さです。 私が引用した例は、次の呼び出しで作成されます。

//  ,  ,       Morris.Line({ element: 'quarterly', data: [ {q: '2009 Q3', a: 100, b: 75}, {q: '2010 Q2', a: 75, b: 50}, {q: '2010 Q3', a: 75, b: 50}, {q: '2011 Q1', a: 50, b: 25}, {q: '2011 Q3', a: 50, b: 25}, {q: '2011 Q4', a: 75, b: 50}, {q: '2012 Q2', a: 100, b: 75} ], xkey: 'q', ykeys: ['a', 'b'], labels: ['Series A', 'Series B'], lineColors: ['#167f39','#044c29'], lineWidth: 2 });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

APIの使用に必要なすべての詳細は、元のソースで十分に詳細に説明されています -ほとんどの場合、オープンソースを覗く必要はありません。



私の意見では、「モリス」に欠けている唯一のものは、水平に垂直な垂直線です。 そのため、マウスが起動されたときだけでなく、同じ時間の値の接続がすぐに表示されます。



また、一部の人にとっては、モリスの仕事の結果は非常に単純に見えると予測しています。 ただし、彼らは常にgRaphaëlの助けに頼ることができ、それによりやや洗練されたグラフィックを作成できます。