个人中心
gpt4 book ai didi

javascript - 用于显示分析图的 graph ui 库的建议

转载 作者：太空宇宙 更新时间：2023-11-04 14:58:20 25 4
gpt4 key购买 nike

我想制作推文的分析图，类似于下面的网站链接

Website-Link

我想知道开源中可用的最佳选择是什么？

我听说 Raphael.js 不错。其他建议？

最佳答案

您列出的网站使用 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 或其他聚合数据中提取数据来源)。但这将是另一个问题!

关于javascript - 用于显示分析图的 graph ui 库的建议，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16747341/

25 4 0
文章推荐： javascript - 使用 ul 和 li 标签选择框
文章推荐： java - 如何使用文件 channel 作为参数来写入对象
文章推荐： html - RequireJS 文本插件 : cannot load HTML from other domain
文章推荐： css - 如何在css中实现canvas design设计模式？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com