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中。将它们更换为体块后，问题就解决了。