jqplot.CanvasAxisTickRenderer抛出Uncaught TypeError

Question

我正在使用jqplot来显示我的条形码。

条形图工作正常，直到我添加了tickRenderer和tickOptions。

现在我收到以下错误：未捕获的TypeError：undefined不是函数

这是我的代码

plot3 = $.jqplot('chart3', [s2, s3], {
    stackSeries: true,
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        rendererOptions: {
            highlightMouseDown: true
        },
        pointLabels: {show: true}
    },
    legend: {
        show: true,
        location: 'e',
        placement: 'outside'
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticks,
            tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
            tickOptions: {
                angle: -90,
                fontSize: '10pt'
            }
        }
    }
});

Answer 1

我正在动态加载我的脚本，但我的loadScript（）函数是asyc，因此在绘制图表之前并非所有资源都已加载。将async更改为false后，一切都开始工作了。

loadScript("jqplot/jquery.jqplot.min.js");
loadScript("jqplot/jqplot.dateAxisRenderer.min.js");
loadScript("jqplot/jqplot.barRenderer.min.js");
loadScript("jqplot/jqplot.canvasTextRenderer.min.js");
loadScript("jqplot/jqplot.canvasAxisTickRenderer.min.js");
loadScript("jqplot/jqplot.categoryAxisRenderer.min.js");
loadScript("jqplot/jqplot.pointLabels.min.js");

function loadScript(jsPage) {
    $.ajax({
        url: jsPage,
        async: false,
        dataType: "script"
    });
}

Answer 2

我尝试了你的代码，它的工作原理...... 我不知道你的问题是什么。

我加入了这些插件

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.css" />
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.cursor.min.js"></script>

我使用这些数据阵列进行测试。

$(document).ready(function(){
 s2 = [0,1,2,3,4];
 s3 = [1,2,3,4,5];
 ticks = ["a","b","c","d","e"];

这是结果