0

次のウェブサイトのリンクのようなツイートの分析グラフを作成したい

ウェブサイトへのリンク

オープンソースで利用できる最良のオプションは何ですか?

Raphael.js が優れていると聞いたことがあります。他の提案？

4

1 に答える 1

1

リストしたサイトはhttp://www.flotcharts.orgを使用しています。私は成功して以前にそれを使用しました。

5/25 編集

Flot には、優れたドキュメントと多くの例が含まれています (例はhttp://www.flotcharts.org/flot/examples/にあります)。ただし、わかりやすくするために、最も単純な例を取り上げ、不要なコードの一部を削除しました ( http://www.flotcharts.org/flot/examples/basic-usage/index.htmlの例)。

コード例 

    <title>Flot Example</title>

    <!-- Import Flot Scripts -->
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="../../jquery.js"></script>
    <script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>   
    <!-- /End Import Flot Scripts -->

    <script type="text/javascript">
    <!-- This is just a simple example, creating the data in-line. -->

    $(function() {

        // This will generate the curved line you will see on the page.
        var d1 = [];
        for (var i = 0; i < 14; i += 0.5) {
            d1.push([i, Math.sin(i)]);
        }

        // Create static data for second data series.
        var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

        // A null signifies separate line segments
        // Create static data for third data series, with line segments.
        var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];

        $.plot("#placeholder", [ d1, d2, d3 ]);
    });

    </script>

    <style>
        <!-- These styles come from http://www.flotcharts.org/flot/examples/examples.css.
             The most important thing is that your chart needs a height and width set for it
             before you try to create it with JavaScript. -->
        .demo-container {
            box-sizing: border-box;
            width: 850px;
            height: 450px;
            padding: 20px 15px 15px 15px;
            margin: 15px auto 30px auto;
            border: 1px solid #ddd;
            background: #fff;
            background: linear-gradient(#f6f6f6 0, #fff 50px);
            background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
            background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
            background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
            background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
            box-shadow: 0 3px 10px rgba(0,0,0,0.15);
            -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }

        .demo-placeholder {
            width: 100%;
            height: 100%;
            font-size: 14px;
            line-height: 1.2em;
        }

        .legend table {
            border-spacing: 5px;
        }
    </style>
</head>
<body>

    <!-- Begin fancy chart container. -->
    <div class="demo-container">
        <!-- Begin chart placeholder. This is wher your chart will appear -->
        <div id="placeholder" class="demo-placeholder"></div>
        <!-- /End chart placeholder. -->
    </div>
    <!-- /End fancy chart container. -->

</body>
</html>

ここで、PHP、.NET (またはその他のサーバー側言語、または ajax を使用して API に接続) からデータを取得する必要があります (おそらく Twitter や別の集計データ ソースからデータを取得します)。しかし、それは別の問題でなければなりません！

于 2013-05-25T07:23:35.930 に答える