jqPlot 角度不起作用

Question

我试图以一定角度显示我的标签。但我似乎无法让它工作，我发现有人告诉我使用 jqplot.canvasAxisTickRenderer.js 但是当我添加对它的引用时 (https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisTickRenderer.js) 我收到以下错误：未捕获的类型错误：无法读取未定义的属性 'init'

有人知道我做错了什么吗？

这是我的代码：

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.barRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.pointLabels.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisTickRenderer.js"></script>


<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.min.css">


<style>
body {
  background-color: #474744;
}

.jqplot-point-label {
  color: white;
}

.jqplot-yaxis-tick {
    right: 5px !important;
    padding-right: 0px !important;
}
.jqplot-table-legend-swatch-outline {
    border: 0 !important;
}
</style>

<div id="chart2" style="height:300px; width:600px;"></div>

<script>
$(document).ready(function () {
    var somedata = [
        [119, 42, 190, 168, 111, 90, 150, 545, 290, 107, 348, 34],
        [6, 2, 36, 15, 26, 1, 31, 33, 10, 16, 3, 2],
        [84, 27, 88, 89, 36, 45, 38, 193, 103, 14, 42, 1],
        [29, 13, 66, 64, 49, 44, 81, 319, 177, 77, 303, 31]
    ];
    $.jqplot('chart2', somedata, {
        seriesDefaults: {
            shadow: false,
            renderer: $.jqplot.BarRenderer,
            rendererOptions: {
                barPadding: 2
            },
            pointLabels: {
                show: false,
                location: 'n',
                ypadding: 0
            }
        },
        axesDefaults: {
            tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
            tickOptions: {
                angle: -30,
                fontSize: '10pt'
            }
        },
        grid: {
            backgroundColor: '#474744',
            gridLineColor: 'white',
            borderColor: 'white',
            borderWidth: '1px',
            shadow: false
        },
        series: [{
                "label": "TOTAL"
            },
            {
                "label": "MISSING",
                pointLabels: {
                    show: true,
                }
            },
            {
                "label": "LATE"
            },
            {
                "label": "ON TIME"
            }
        ],
        legend: {
            show: true,
            renderer: $.jqplot.EnhancedLegendRenderer,
            location: 'e',
            placement: "outside",
            background: '#474744',
            textColor: 'white',
            border: 'none',
            rendererOptions: {
                numberRows: 4
            }
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ["ACCESSORIES", "TAILORING", "JERSEY", "JEANS & PANTS", "UNITED", "SWEAT", "PLAY", "JDY", "OUTERWEAR", "WOVEN", "KNIT", "SHOES"],
                label: 'Week',
                pad: 1.1,
                tickOptions: {
                    showGridline: false,
                    textColor: 'white'
                },
                labelOptions: {
                    fontFamily: 'Arial',
                    fontSize: '14pt',
                    textColor: 'white'
                }
            },
            yaxis: {
                label: 'Tickets',
                renderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                    textColor: 'white',
                    labelPosition: 'middle', 
                    angle:-30
                },
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                labelOptions: {
                    fontFamily: 'Arial',
                    fontSize: '14pt',
                    textColor: 'white'
                }
            }
        }
    });
});
</script>

Answer 1

没关系，我不知道是什么修复了它。但这是有效的更新代码：

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.logAxisRenderer.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.barRenderer.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/plugins/jqplot.pointLabels.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.8/jquery.jqplot.min.css">
<style>
body {
  background-color: #474744;
}

.jqplot-point-label {
  color: white;
}

.jqplot-yaxis-tick {
    right: 5px !important;
    padding-right: 0px !important;
}
.jqplot-table-legend-swatch-outline {
    border: 0 !important;
}
</style>

<div id="chart2" style="height:300px; width:600px;"></div>

<script>
$(document).ready(function(){   
    var line3 = [
        [119, 42, 190, 168, 111, 90, 150, 545, 290, 107, 348, 34],
        [6, 2, 36, 15, 26, 1, 31, 33, 10, 16, 3, 2],
        [84, 27, 88, 89, 36, 45, 38, 193, 103, 14, 42, 1],
        [29, 13, 66, 64, 49, 44, 81, 319, 177, 77, 303, 31]
    ];

    var plot3 = $.jqplot('chart2', line3, {
        seriesDefaults: {
            shadow: false,
            renderer: $.jqplot.BarRenderer,
            rendererOptions: {
                barPadding: 2
            },
            pointLabels: {
                show: false,
                location: 'n',
                ypadding: 0,
                color: 'white'
            }
        },
        axesDefaults: {
            tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
            tickOptions: {
                fontSize: '10pt'
            }
        },
        grid: {
            backgroundColor: '#474744',
            gridLineColor: 'white',
            borderColor: 'white',
            borderWidth: '1px',
            shadow: false
        },
        series: [{
                "label": "TOTAL"
            },
            {
                "label": "MISSING",
                pointLabels: {
                    show: true,
                }
            },
            {
                "label": "LATE"
            },
            {
                "label": "ON TIME"
            }
        ],
        legend: {
            show: true,
            renderer: $.jqplot.EnhancedLegendRenderer,
            location: 'e',
            placement: "outside",
            background: '#474744',
            textColor: 'white',
            border: 'none',
            rendererOptions: {
                numberRows: 4
            }
        },
      axes: {
        xaxis: {
          ticks: ["ACCESSORIES", "TAILORING", "JERSEY", "JEANS & PANTS", "UNITED", "SWEAT", "PLAY", "JDY", "OUTERWEAR", "WOVEN", "KNIT", "SHOES"],
          renderer: $.jqplot.CategoryAxisRenderer,
          label: 'Warranty Concern',
          pad: 1.1,
          labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
          tickRenderer: $.jqplot.CanvasAxisTickRenderer,
          tickOptions: {
              showGridline: false,
            textColor: 'white',
            angle: -30
          },
          labelOptions: {
                fontFamily: 'Arial',
                fontSize: '14pt',
                textColor: 'white'
            }

        },
        yaxis: {
          tickOptions: {
                textColor: 'white',
                labelPosition: 'middle'
            },
            tickRenderer: $.jqplot.CanvasAxisTickRenderer
        }
      }
    });


});
</script>

Answer 2

在 tickoptions 之前添加 tickRenderer: $.jqplot.CanvasAxisTickRenderer, 似乎可以解决问题。

jqPlot 角度不起作用

jqPlot angle not working

html

javascript

jquery

charts

jqplot