jquery - jqPlot 条形图未正确呈现

Question

我正在尝试在我的 jQuery Mobile 应用程序中开始使用 jqPlot，但我似乎无法让 jqPlot 网站上的示例之一正常工作。我的代码：

var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 2];
var ticks = ['a', 'b', 'c', 'd'];

$.jqplot('chartdiv', [s1, s2], {
    seriesDefaults: {
        renderer:$.jqplot.BarRenderer,
        pointLabels: { show: true }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticks
        }
    }
});

应该产生这个图：

相反，我得到了这个：

请注意，x 轴标签在左下角全部呈现在彼此之上。什么可能导致图表呈现错误？

Answer 1

我在同样的问题上苦苦挣扎。经过一些测试，我发现我实际上没有包含类别轴渲染器插件。

因此，如果您仍然遇到同样的问题，请尝试包含它。（插件/jqplot.categoryAxisRenderer.min.js）

Answer 2

发生这种情况的另一个原因是如果您以错误的顺序将脚本添加到 HTML 文件中。请注意，必须首先包含 jquery，然后是 jqplot，最后是任何插件。

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

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

Answer 3

我的问题是对 jqPlot 脚本的引用被放置在 head-block 内。将它们更换到车身块后，问题就解决了。