Question

我无法找到dateAxisRenderer的tickOption。

我已经按照以下方式尝试过了：

axes:{
axesDefaults:{tickRenderer : $.jqplot.CanvasAxisTickRenderer, tickOptions :{angle: -30}},
xaxis:{
renderer: $.jqplot.DateAxisRenderer,
tickOptions:{
angle: -30,
formatString:'%H:%M'
},
}
}

但这似乎没有用。有人可以帮我解决这个问题。

Answer 1

您需要在xaxis定义中添加rendererOptions：{tickRenderer：$ .jqplot.CanvasAxisTickRenderer}：

axes:{
 axesDefaults:{
  tickRenderer : $.jqplot.CanvasAxisTickRenderer, 
  tickOptions :{angle: -30}
 },
 xaxis:{
  renderer:$.jqplot.DateAxisRenderer, 
  rendererOptions:{                    
   tickRenderer:$.jqplot.CanvasAxisTickRenderer
  },
  ticks: xTicks, 
  tickOptions: {
   angle: -30,
   formatString: '%H:%M'
  },
 }
}

请参阅工作示例 here

Answer 2

1st：在你的代码中添加css和js：

<link class="include" rel="stylesheet" type="text/css" href="jquery.jqplot.min.css" />
<link rel="stylesheet" type="text/css" href="examples.min.css" />
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />


<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
<script class="include" type="text/javascript" src="jquery.min.js"></script>

    <script class="include" type="text/javascript" src="jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.barRenderer.min.js"></script>
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.min.js"></script>
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.pointLabels.min.js"></script>
    <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script>
  <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.canvasTextRenderer.min.js"></script>
  <script class="include" language="javascript" type="text/javascript" src="plugins/jqplot.canvasAxisTickRenderer.min.js"></script>

第二名：HTML代码：

<div id="chartdiv" style="height:400px;width:300px; "></div>

第3代：jQuery代码：

<script class="code" type="text/javascript">
$(document).ready(function(){
  var line1 = [['Cup Holder Pinion Bob', 7], ['Generic Fog Lamp', 9], ['HDTV Receiver', 15], 
  ['8 Track Control Module', 12], [' Sludge Pump Fourier Modulator', 3], 
  ['Transcender/Spice Rack', 6], ['Hair Spray Danger Indicator', 18]];
  var plot3 = $.jqplot('chart3', [line1], {
    title: 'Concern vs. Occurrance',
    series:[{renderer:$.jqplot.BarRenderer}],
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
          angle: -30
        }
    },
    axes: {
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        tickOptions: {
          labelPosition: 'middle'
        }
      },
      yaxis: {
        autoscale:true,
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
          labelPosition: 'start'
        }
      }
    }
  });
});
</script>

dateAxisRenderer中的X轴标签角度

2 个答案: