如何在这个jqplot脚本中旋转x轴标签

Question

以下是基于jqplot条形图示例的脚本的一部分。由于x轴刻度标签重叠，我试图将它们旋转。我已经导入了TickRender插件，但是当我在下面的脚本中添加以下代码时，图表根本无法打印。

请问您可以告诉我如何正确地实现这个功能吗？

tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
  tickOptions: {
     angle: -30,
     fontSize: '10pt'
  }

//jqplot脚本

$(document).ready(function(){
        $.jqplot.config.enablePlugins = true;
        var s1 = [2314,2053,94,70,2541,2626,2551,2515,2147,116,82,2536,2560,2558,2465,2127,103,73,2546,2554,2583,2527,2235,104,88,2515,2604,2641,2532,2142];
        var ticks = ['01/11/2012','02/11/2012','03/11/2012','04/11/2012','05/11/2012','06/11/2012','07/11/2012','08/11/2012','09/11/2012','10/11/2012','11/11/2012','12/11/2012','13/11/2012','14/11/2012','15/11/2012','16/11/2012','17/11/2012','18/11/2012','19/11/2012','20/11/2012','21/11/2012','22/11/2012','23/11/2012','24/11/2012','25/11/2012','26/11/2012','27/11/2012','28/11/2012','29/11/2012','30/11/2012'];

        plot1 = $.jqplot('chart1', [s1], {
            // Only animate if we're not using excanvas (not in IE 7 or IE 8)..
            animate: !$.jqplot.use_excanvas,
            seriesDefaults:{
                renderer:$.jqplot.BarRenderer,
                pointLabels: { show: true }

            tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
                tickOptions: {
                angle: -30,
                fontSize: '10pt'
                }

            },
            axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer,
                    ticks: ticks
                }



            },
            highlighter: { show: false }
        });

        $('#chart1').bind('jqplotDataClick',
            function (ev, seriesIndex, pointIndex, data) {
                $('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
            }
        );
    });

- George Thompson

Answer 1

尝试一下这个：

 axesDefaults: {
            tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
            tickOptions: {
                angle: -90,
                fontSize: '10pt'
            }
        },
        axes: {
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            },
    }

或者

axes: {
       xaxis: {
              renderer:$.jqplot.DateAxisRenderer,
              ticks: ticks,
              tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
              tickOptions: {
                           angle: -90,
                           fontSize: '10pt'
                           }
              }
      }

或者

axes: {
           xaxis: {
                  renderer:$.jqplot.DateAxisRenderer,
                  ticks: ticks,
                  rendererOptions:{
                                 tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
                                 tickOptions: {
                                              angle: -90,
                                              fontSize: '10pt'
                                              }
                                 }
                }
      }

- Nandu

---

谢谢回复。我一定是做错了其他事情。我通常用Python编写代码，但是为了制作漂亮的图形，我正在使用JavaScript。我正在查看一些教程，找到问题后会更新调用。 - George Thompson

如果您不包含jqplot.canvasAxisTickRenderer.js，则轴将不会旋转，而始终水平渲染。 - Chris Hutchinson

Answer 2

从http://www.jqplot.com/examples/rotated-tick-labels.php中包含以下文件

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

    <script type="text/javascript" src="js/plugins/jqplot.dateAxisRenderer.js"></script>
    <script type="text/javascript" src="js/plugins/jqplot.canvasTextRenderer.js"></script>
    <script type="text/javascript" src="js/plugins/jqplot.canvasAxisTickRenderer.js"></script>
    <script type="text/javascript" src="js/plugins/jqplot.categoryAxisRenderer.js"></script>
    <script class="include" type="text/javascript" src="js/plugins/jqplot.pointLabels.js"></script>
    <script class="include" type="text/javascript" src="js/plugins/jqplot.barRenderer.js"></script>
    <script class="include" type="text/javascript" src="js/plugins/jqplot.pieRenderer.js"></script>

- Giri Reddy