jqplot无法正确显示图例和y轴标签

时间:2012-05-16 14:32:35

标签: label jqplot legend

我有一个使用jqplot和两行的线图。一行代表最大值,另一行代表最小值。我的代码图例无法正确显示,y轴标签与y轴重叠,我做错了什么?谢谢你的帮助!

[编辑] Jqplot版本是jquery.jqplot.1.0.0b2_r1012

我的代码显示此图表:

My code display this chart

我想要一个类似于中的传奇的传奇 image

这是我的代码:

<link rel="stylesheet" type="text/css" hrf="../plugins/jqplot/jquery.jqplot.min.css" />
<script type="text/javascript" src="../plugins/jqplot/jquery.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot/plugins/jqplot.enhancedLegendRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot/plugins/jqplot.canvasOverlay.min.js"></script>
<script>
  $(document).ready(function(){               
          var maxPoints86 = [3.000000,4.000000,4.500000,5.000000,7.000000,7.000000,5.500000,8.500000,6.700000,5.200000,4.000000,5.500000,0.200000,7.500000,5.000000,5.200000,5.000000];
          var minPoints86 = [2.000000,1.000000,3.000000,4.000000,5.000000,4.800000,5.000000,6.000000,4.000000,2.500000,2.500000,5.000000,0.100000,6.000000,3.500000,5.000000,5.000000];

          var plot86 = $.jqplot('chart', [maxPoints86, minPoints86], 
          { 
              title:'Errores en facturación',
              axesDefaults: {
                labelRenderer: $.jqplot.CanvasAxisLabelRenderer
              },
              axes: {
                xaxis: {
                  label: "Monthly",
                },
                yaxis: {
                  label: "Percentage"
                }
              },
              legend: {
                show: true,
                location: 'se',
                labels:['Max','Min'],
                showSwatch: true,
                predraw: false,
                placement:"insideGrid",
              },
              series:[ 
                  {
                    lineWidth:5,
                    markerOptions: { style:"circle", size:10 }
                  },
                  {
                    lineWidth:5, 
                    markerOptions: { style:"filledSquare", size:10 }
                  }
              ]
            }
          );

    });
</script>
<div id="chart" style="width:500px;height:300px;"></div>

1 个答案:

答案 0 :(得分:5)

马克在评论中解决了这个问题。我的样式表链接错误,href应该是href。非常感谢马克!