javascript - 如何使 jqPlot 与条形图示例一起使用-6ren

javascript - 如何使 jqPlot 与条形图示例一起使用

转载作者：行者123 更新时间：2023-11-28 01:34:49

25

4

我正在尝试运行 jqPlot 中的示例。我将他们的代码调整为我的页面:

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Tests</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <div>Testing a chart 2</div>

        <script type="text/javascript" src="jqplot.barRenderer.min.js"></script>
        <script type="text/javascript" src="jqplot.categoryAxisRenderer.min.js"></script>
        <script type="text/javascript" src="jqplot.pointLabels.min.js"></script>

        <script language=javascript type="text/javascript">
                $(document).ready(function() {
                    var s1 = [200, 600, 700, 1000];
                    var s2 = [460, -210, 690, 820];
                    var s3 = [-260, -440, 320, 200];
                    // Can specify a custom tick Array.
                    // Ticks should match up one for each y value (category) in the series.
                    var ticks = ['May', 'June', 'July', 'August'];

                    var plot1 = $.jqplot('chart1', [s1, s2, s3], {
                        // The "seriesDefaults" option is an options object that will
                        // be applied to all series in the chart.
                        seriesDefaults: {
                            renderer: $.jqplot.BarRenderer,
                            rendererOptions: {fillToZero: true}
                        },
                        // Custom labels for the series are specified with the "label"
                        // option on the series option.  Here a series option object
                        // is specified for each series.
                        series: [
                            {label: 'Hotel'},
                            {label: 'Event Regristration'},
                            {label: 'Airfare'}
                        ],
                        // Show the legend and put it outside the grid, but inside the
                        // plot container, shrinking the grid to accomodate the legend.
                        // A value of "outside" would not shrink the grid and allow
                        // the legend to overflow the container.
                        legend: {
                            show: true,
                            placement: 'outsideGrid'
                        },
                        axes: {
                            // Use a category axis on the x axis and use our custom ticks.
                            xaxis: {
                                renderer: $.jqplot.CategoryAxisRenderer,
                                ticks: ticks
                            },
                            // Pad the y axis just a little so bars can get close to, but
                            // not touch, the grid boundaries.  1.2 is the default padding.
                            yaxis: {
                                pad: 1.05,
                                tickOptions: {formatString: '$%d'}
                            }
                        }
                    });
                });
        </script>

        <div id="chart1" style="height:400px;width:300px; "></div>

        <br><a href="/Test/index.html">Home</a>
    </body>
</html>

请注意，我使用图表名称 chart1 创建了 div，然后相应地添加了插件。

最佳答案

您需要添加主“jqplot”javascript 文件，而不仅仅是插件文件:

<script type="text/javascript" src="jquery.jqplot.js"></script>

请参阅工作示例 here

PS:关于您的 Chart2.html 文件(在您的存档中)

您必须以精确的顺序加载文件:首先是 jquery，然后是 jqplot，最后是 jqlot 插件(它们之间没有任何特定的顺序)。
您拼错了 jqplot 文件:jquery.jqplot.min.js(不要忘记“q”字母)
您不需要同时加载 jquery.jqplot.min.js 和 jquery.jqplot.js，因为它们是相同的内容(区别在于缩小)。
如果您希望图表良好显示，请不要忘记加载 jqplot CSS。

因此正确的 javascript 和 css 包含是:

<script src="jquery.min.js"></script>
<script src="jquery.jqplot.min.js"></script>
<script src="jqplot.barRenderer.min.js"></script>
<script src="jqplot.categoryAxisRenderer.min.js"></script>
<script src="jqplot.pointLabels.min.js"></script>
<link href="jquery.jqplot.css" rel="stylesheet" type="text/css">

关于javascript - 如何使 jqPlot 与条形图示例一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21667444/

25

4

0

文章推荐： c++ ceil() in stooge sort 不工作

文章推荐： PHP DOM - 将 THEAD 中的 TD 标签替换为 TH 标签

文章推荐： css - 将光标放在行的其他元素上时如何使链接悬停

IPv6 示例 Wireshark 示例
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: Sample data for IPv6? 除了 wireshark 在其网站上提供的内容之外，是否有可以下
c# - WPF 中的多拖放——示例/示例/教程？
我正在寻找可以集成到现有应用程序中并使用多拖放功能的示例或任何现成的解决方案。我在互联网上找到的大多数解决方案在将多个项目从 ListBox 等控件拖放到另一个 ListBox 时效果不佳。谁能指出我
java - GATE Embedded 示例示例 NoClassFound 错误
我是 GATE Embedded 的新手，我尝试了简单的示例并得到了 NoClassDefFoundError。首先我会解释我尝试了什么在 D:\project\gate-7.0 中下载并提取 Ga
eclipse-rcp - Eclipse 中的 JFace 示例，如 SWT 示例？
是否有像 Eclipse 中的 SWT 示例那样的多合一 JFace 控件示例？搜索(在 stackoverflow.com 上使用谷歌搜索和搜索)对我没有帮助。如果它是一个独立的应用程序或 ecl
google-compute-engine - Google 计算引擎 .NET API 示例/示例/教程
我找不到任何可以清楚地解释如何通过 .net API(特别是 c#)使用谷歌计算引擎的内容。有没有人可以指点我什么？附言我知道 API 引用 ( https://developers.google.
基于Basicauth的一个C#示例
最近在做公司的一个项目时，客户需要我们定时获取他们矩阵系统的数据。在与客户进行对接时，提到他们的接口使用的目前不常用的BASIC 认证。天呢，它好不安全，容易被不法人监听，咋还在使用呀。但是没办法呀，
基于Basicauth的一个C#示例
最近在做公司的一个项目时，客户需要我们定时获取他们矩阵系统的数据。在与客户进行对接时，提到他们的接口使用的目前不常用的BASIC 认证。天呢，它好不安全，容易被不法人监听，咋还在使用呀。但是没办法呀，
YAML 示例
我正在尝试为我的应用程序设计配置文件格式并选择了 YAML。但是，这(显然)意味着我需要能够定义、解析和验证正确的 YAML 语法! 在配置文件中，必须有一个名为 widgets 的集合/序列。 .这
python - 示例
你能给我一个使用 pysmb 库连接到一些 samba 服务器的例子吗？我读过有类 smb.SMBConnection.SMBConnection(用户名、密码、my_name、remote_name
示例：iptables限制ssh链接服务器
linux服务器默认通过22端口用ssh协议登录，这种不安全。今天想做限制，即允许部分来源ip连接服务器。案例目标：通过iptables规则限制对linux服务器的登录。处理方法：编
Sonarqube PostProjectAnalysisTask 示例？
我一直在寻找任何 PostProjectAnalysisTask 工作代码示例，但没有看。 This页面指出 HipChat plugin使用这个钩子(Hook)，但在我看来它仍然使用遗留的 Po
GWT CustomScrollPanel 示例
我发现了 GWT 的 CustomScrollPanel 以及如何自定义滚动条，但我找不到任何示例或如何设置它。是否有任何示例显示正在使用的自定义滚动条？最佳答案这是自定义 native 滚动条的
Marionette CRUD 示例
我正在尝试开发一个 Backbone Marionette 应用程序，我需要知道如何以最佳方式执行 CRUD(创建、读取、更新和销毁)操作。我找不到任何解释这一点的资源(仅适用于 Backbone)。
Android BLE 示例
关闭。这个问题需要details or clarity .它目前不接受答案。想改进这个问题？通过 editing this post 添加详细信息并澄清问题. 去年关闭。 Improve this
将多个实例提交到数据库的表单的 Django 示例？
我需要一个提交多个单独请求的 django 表单，如果没有大量定制，我找不到如何做到这一点的示例。即，假设有一个汽车维修店使用的表格。该表格将列出商店能够进行的所有可能的维修，并且用户将选择他们想要进
spring - MultiTenantSpringLiquibase 示例。
我有一个 Multi-Tenancy 应用程序。然而，这个相同的应用程序有 liquibase。我需要在我的所有数据源中运行 liquibase，但是我不能使用这个 Bean。我的应用程序.yml
业务应用程序的 TDD 示例
我了解有关单元测试的一般思想，并已在系统中发生复杂交互的场景中使用它，但我仍然对所有这些原则结合在一起有疑问。我们被警告不要测试框架或数据库。好的 UI 设计不适合非人工测试。 MVC 框架不包括一
Clojure For Comprehension 示例
我正在使用 docjure并且它的 select-columns 函数需要一个列映射。我想获取所有列而无需手动指定。如何将以下内容生成为惰性无限向量序列 [:A :B :C :D :E ... :A
yii - findByAttributes 示例
$condition使用说明和 $param在 findByAttributes在 Yii 在大多数情况下，这就是我使用 findByAttributes 的方式 Person::model()->f
未启用 qtcreator 示例
我在 Ubuntu 11.10 上安装了 qtcreator sudo apt-get install qtcreator 安装的版本有:QT Creator 2.2.1、QT 4.7.3 当我启动

首页

博学

6Ren·AI

商城

javascript - 如何使 jqPlot 与条形图示例一起使用