Question

使用最新的 JQplot 版本1.0.8，示例文件中的第二个图形：AxisLabelRotatedText.html生成以下图形： Original example from jqPlot 1.0.8 of second graph in axisLabelsRotatedText.html

我复制了示例文件并进行了一些更改以编辑我正在处理的内容。我期待获得相同的图形，但最终得到了一个版本，其中轴文本被裁剪： example with cropped axis text

以下是再现错误的示例的最小版本（从jqPlot 1.0.8发行版中包含的AxisLabelRotatedText.html示例修改）：

<!DOCTYPE html>
<html>

<head>
    <title>Axis Labels and Rotated Text</title>

    <!-- Normal jQuery and jqPlot includes -->
    <link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" /> 
    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
    <script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
    <!-- Additional plugins go here -->
    <script class="include" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
    <script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
    <script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
    <script class="include" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script>
    <!-- End additional plugins -->
</head>

<body dir="rtl">
    <div class="example-plot" id="chart2"></div>  
    <style type="text/css">
        .jqplot-point-label {white-space: nowrap;}
        div.jqplot-target {
            height: 400px;
            width: 750px;
            margin: 70px;
        }
    </style>
</body>

<script class="code" type="text/javascript" language="javascript">
    $(document).ready(function(){   
        var line2 = [['1/1/2008', 42], ['2/14/2008', 56],
                     ['3/7/2008', 39], ['4/22/2008', 81]];
        var plot2 = $.jqplot('chart2', [line2], {
            axes: {
                xaxis: {
                    renderer: $.jqplot.DateAxisRenderer,
                    label: 'Incliment Occurrance',
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                    tickOptions: {
                        angle: 15
                    }
                },
                yaxis: {
                    label: 'Incliment Factor',
                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                }
            }
        });
    });
</script>

</html>

假设上面的代码位于jqPlot 1.0.8发行版的examples目录中。

为什么jqPlot轴标记文本标签被裁剪/损坏，并且轴标签没有显示上述代码？

Answer 1

发现ye9ane时，问题是由jqPlot <div>的文本方向设置为从右到左引起的。在这种情况下，可以通过在<body dir="rtl">中设置文本方向来完成。检查后，我发现从右到左文字方向的问题是known bug in jqPlot。

一个部分解决方法是将包含jqPlot图表的<div>上的文本方向设置为从左到右，同时将页面的其余部分从右到左。显然，这是不完美的，因为即使标签使用的语言应该从右向左显示，图表中的文字也是从左到右。

要实施上述解决方法，请更改以下行：
<div class="example-plot" id="chart2"></div>
到
<div class="example-plot" id="chart2" dir="ltr"></div>

可以使用direction: ltr;在CSS中实现相同的解决方法，并将其应用于适当的选择器。

为什么jqPlot轴标记文本标签被裁剪/损坏而轴标签不显示？

1 个答案: