gpt4 book ai didi

javascript - 为什么 jqPlot 轴刻度文本标签被裁剪/损坏并且轴标签不显示?

转载 作者:行者123 更新时间:2023-11-28 00:45:40 25 4
gpt4 key购买 nike

使用最新的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 轴刻度文本标签被裁剪/损坏并且轴标签未显示?

最佳答案

ye9ane发现问题是由于将 jqPlot 的文本方向设置为从右到左引起的 <div> 。在本例中,这是通过在 <body dir="rtl"> 中设置文本方向来完成的。 。经过检查,我发现从右到左的文本方向的问题是known bug in jqPlot .

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

要实现上述解决方法,请更改以下行:
<div class="example-plot" id="chart2"></div>

<div class="example-plot" id="chart2" dir="ltr"></div>

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

关于javascript - 为什么 jqPlot 轴刻度文本标签被裁剪/损坏并且轴标签不显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27432104/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com