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

Question

I am trying to run an example from jqPlot .我正在尝试从jqPlot运行一个示例。 I adapted their code to my page:我将他们的代码调整到我的页面：

<!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>

Note that I created the div with the chart name chart1 , then plugins were added accordingly.请注意，我使用图表名称chart1创建了div ，然后相应地添加了插件。

Answer 1

You need to add the main "jqplot" javascript file and not only the plugin files :您需要添加主要的“jqplot”javascript 文件，而不仅仅是插件文件：

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

Please see working example here请在此处查看工作示例

PS : about your Chart2.html file (in your archive) PS ：关于你的 Chart2.html 文件（在你的档案中）

You have to load files in a precise order : First jquery, then jqplot, and finally jqlot plugins (without any particular order between them).您必须以精确的顺序加载文件：首先是 jquery，然后是 jqplot，最后是 jqlot 插件（它们之间没有任何特定的顺序）。
You have mispelled jqplot file : jquery.jqplot.min.js (don't forget the 'q' letter)您拼错了 jqplot 文件：jquery.jqplot.min.js（不要忘记“q”字母）
You don't need to load both jquery.jqplot.min.js and jquery.jqplot.js as it is the same content (the difference is in the minification).您不需要同时加载 jquery.jqplot.min.js 和 jquery.jqplot.js 因为它们是相同的内容（区别在于缩小）。
Don't forget to load jqplot CSS if you want your graph to be well-displayed.如果您希望您的图形显示良好，请不要忘记加载 jqplot CSS。

Thus the correct javascript and css inclusion is :因此，正确的 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">

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-02-10 07:01:42

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-02-10 07:01:42

解决方案1
2 已采纳 2014-02-10 07:01:42