为什么jqPlot轴刻度文本标签被裁剪/损坏并且轴标签没有显示？
9
使用最新的JQplot版本1.0.8，示例文件中的第二个图形：AxisLabelRotatedText.html生成以下图形：
我复制了示例文件，并进行了一些更改以将其编辑为正在处理的内容。我原本希望得到相同的图，但最终得到的版本中裁剪了轴文本：
以下是重现该错误的示例的最低版本（从AxisLabelRotatedText.htmljqPlot 1.0.8发行版随附的示例进行了修改）：
<!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>
假定以上代码位于examplesjqPlot 1.0.8发行版的目录中。
Why are jqPlot axis tick text labels cropped/corrupted and axis labels not displayed with the above code?
Makyen
As ye9ane discovered, the problem is caused by setting the text direction to be right-to-left for the jqPlot <div>. In this instance, that is done by setting the text direction in <body dir="rtl">. After checking, I found that problems with right-to-left text direction is a known bug in jqPlot.
One partial workaround is to set the text direction on just the <div> containing the jqPlot chart to be left-to-right while leaving the rest of the page in right-to-left. This is, obviously, imperfect in that the text in the chart will be left-to-right even if the labels are in a language which should be displayed right-to-left.
为了落实上述解决办法更改的行：
<div class="example-plot" id="chart2"></div>
以
<div class="example-plot" id="chart2" dir="ltr"></div>
通过使用CSSdirection: ltr;并将其应用于适当的选择器，可以在CSS中实现相同的解决方法。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
隐藏发件人没有短信PHP
- 2
Hashchange事件侦听器在将事件处理程序附加到事件之前进行侦听
- 3
在浏览器中请求URL时会发生什么？
- 4
flask-admin 如何自定义删除按钮
- 5
材质UI垂直滑块。如何改变在垂直材料UI滑块导轨的厚度（反应）
- 6
用日期数据透视表和日期顺序查询
- 7
Jqgrid：多级别组摘要
- 8
java io ioexception无法解析服务器地址解析器的响应
- 9
Swift如何使用Base64Url编码JWT标头和有效负载之类的json对象
- 10
sshd AllowGroups组未授予访问权限
- 11
jQuery无限滚动固定div中的滚动
- 12
android 背部按下
- 13
Flexbox CSS 对齐属性环境惰性？
- 14
为什么随机森林中的平均降低基尼系数取决于人口规模？
- 15
ClickHouse 创建临时表
- 16
为什么PlusShare.Builder setRecipients方法不起作用？
- 17
如何在Android中识别MICR代码
- 18
PyQt4.QtCore模块无法向sip模块注册
- 19
正则表达式，用于查找所有以任何字母开头和数字开头的文件
- 20
是否可以通过编程方式对很多动画进行重新着色？
- 21
机器密钥生成
我来说两句