如何在x轴上为jqplot.CanvasAxisTickRenderer设置tickInterval?x轴标签是字符串.
我尝试下面的代码,但它不起作用.请帮助,谢谢.
xaxis: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: -90,
fontSize: '12pt'
},
tickInterval : 10,
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
label: '<%= chartBy.replace("_", " ").toUpperCase()%>',
labelOptions:{
enableFontSupport:true,
fontFamily:'Verdana',
fontSize: '12pt'
}
Run Code Online (Sandbox Code Playgroud) 我有一个简单的JSF折线图,它使用PrimeFaces(通过jqPlot)库:
<p:lineChart id="linear"
value="#{team.chart}"
title="Lap Times"
xaxisLabel="Lap"
yaxisLabel="Time (sec)"
style="height:300px;width:600px" />
Run Code Online (Sandbox Code Playgroud)
但是,我想更改图表的标题和X/Y标签颜色.我似乎无法找到合适的CSS组合来实现这一目标.例如,以下操作不起作用:
.jqplot-xaxis {
/* skin */
font-family: Lucida Grande, Lucida Sans, Arial, sans-serif;
color: white ! important;
font-size: 90%;
}
Run Code Online (Sandbox Code Playgroud)
有什么想法吗?
首先,提前感谢您的答案.
这是我的问题.我有一个JqPlot的线性图表,我需要显示图例,但我不知道如何更改系列名称.我们怎么做?
这是我的代码.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jqplot.min.js"></script>
<script type="text/javascript" src="plugins/jqplot.dateAxisRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var line1=[['2008-06-30',4], ['2008-7-14',6.5], ['2008-7-28',5.7], ['2008-8-11',9], ['2008-8-25',8.2]];
var line2=[['2008-06-30',8], ['2008-7-14',5], ['2008-7-28',7], ['2008-8-11',2], ['2008-8-25',2]];
var plot2 = $.jqplot('conteneur', [line1,line2], {
title:'Customized Date Axis',
seriesDefaults: {
rendererOptions: {
//////
// Turn on line smoothing. By default, a constrained cubic spline
// interpolation algorithm is used which will not overshoot or
// undershoot any data points.
////// …Run Code Online (Sandbox Code Playgroud) 我正在尝试使用jqplot生成条形图.我的所有值都是浮点数,如下所示:
var s1 = [17.1, 18.2];
var s2 = [50.2, 53];
var s3 = [93.9, 93];
var s4 = [34.1, 34];
Run Code Online (Sandbox Code Playgroud)
但它将它们四舍五入到整数.
以下是工作示例:http://jsfiddle.net/JkBKs/
我怎样才能解决这个问题?
我正在尝试用2行创建一个JQ Plot.第一行每小时都有第1天的数据,第二行是每小时数据的第2行.当我使用这两行创建图表时,我希望在第二行的顶部显示一行来显示每小时数据比较.但我在图表上看到这两条线彼此相邻.
我在这里有样品
请让我知道如何调整图表选项以在另一行之上显示一行.谢谢.
这是我的代码:
<html>
<head>
<script src="http://www.jqplot.com/deploy/dist/jquery.min.js"></script>
<script src="http://www.jqplot.com/deploy/dist/jquery.jqplot.min.js"></script>
<script src=""></script>
<link class="include" rel="stylesheet" type="text/css" href="http://www.jqplot.com/deploy/dist/jquery.jqplot.min.css" />
<script class="include" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.cursor.min.js"></script>
<script class="include" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script class="include" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.logAxisRenderer.min.js"></script>
<script class="include" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script class="include" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
line1 = [["6/22/2009 10:00",425.32], ["6/22/2009 11:00",424.84], ["6/22/2009 12:00",417.23], ["6/22/2009 13:00",390],
["6/22/2009 14:00",393.69], ["6/22/2009 15:00",392.24], ["6/22/2009 16:00",369.78], ["6/22/2009 17:00",330.16], ["6/22/2009 18:00",308.57],
["6/22/2009 19:00",346.45], ["6/22/2009 20:00",371.28], ["6/22/2009 21:00",324.7]];
line2 = [["6/23/2009 10:00",325.32], ["6/23/2009 11:00",324.84], ["6/23/2009 12:00",217.23], ["6/23/2009 13:00",190], …Run Code Online (Sandbox Code Playgroud) 我正在使用JQPlot,如果在图例中点击它们,我有一个关于隐藏线条的问题.
这是我的代码:
var plotCustomerSurveyGraph = $.jqplot('CustomerSurveyLineGraph', [[0,1,3,2,3,0,1,3,1,2,3,1,2], [1,2,3,1,1,2,2,3,3,1,2,1,2], [1,2,3,4,4,3,2,2,1,4,3,2,2], [0,1,3,3,1,2,2,1,1,0,0,1,2],[2,2,3,3,4,4,0,2,0,1,1,3,3], [2,2,3,3,1,1,0,1,0,2,3,3,1], [1,3,1,4,3,3,1,2,3,4,1,2,1], [2,1,3,2,1,2,0,1,2,4,2,1,0]],
{
axes:
{
xaxis:
{
label: "Date (Week)",
ticks: ['1','2','3','4','5','6','7','8','9','10','11','12','13']
},
yaxis:
{
label: 'Rating',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
ticks: ['0','1','2','3']
}
},
title:'Customer Survey (Last 3 Months)',
width: 480, height: 480,
legend:{show:true, location: 'e', placement: 'outsideGrid'},
seriesDefaults:
{
rendererOptions: {smooth: true}
},
series:[
{
lineWidth:1,
label:'Staff Appearance',
markerOptions: { size:7, style:'dimaond' }
},
{
lineWidth:1,
label:'Staff Product Knowledge',
markerOptions: { size: 7, style:"dimaond" } …Run Code Online (Sandbox Code Playgroud) 我正在尝试使用<p:chart>Primefaces 5.1 的组件创建折线图.
我需要X轴显示时间.像这样的东西:

但只针对旧版本的文档.
我发现了几件事:
但是在5.1版本中没有这样的标签<p:lineChart>,甚至没有属性extender="".
我根据展示创建了我的图表:
但这个例子并没有多大帮助,因为它只适用于日期.并且复杂化为String.我需要时间.
我想知道是否有人已经在较新版本的Primefaces中创建了类似的东西.
编辑:
再搜索一下,我找到了这个主题:
我使用了它提到的例子,我可以使它工作.
我可以看到,当它是DateAxis时需要设置axis.setMax().最后看起来像这样:

它按我的需要工作,但有两件事我不明白:
第一:需要设置的原因axis.setMax().
第二:这个模式用的是axis.setTickFormat("%H:%#M:%S")什么?
我正在使用primefaces 5.2最新版本并尝试使用折线图,它的工作正常.
我试图更改折线图轴颜色,背景,边框...等但扩展器属性在最新的primefaces版本中不起作用.
我的XHTML:
<p:chart type="line" model="#{chartViewLine.lineModel1}" styleClass="legendpos" extender="chartExtender" style="height:300px; width:570px;"/>
Run Code Online (Sandbox Code Playgroud)
JAVASCRIPT:
function chartExtender() {
this.cfg.grid = {
background: 'transparent',
gridLineColor: '#303030',
drawBorder: false,
};
Run Code Online (Sandbox Code Playgroud)
__CODE__
是'extender'属性的替代方案还是我的代码有任何错误的语法?
我在JavaScript中有两个简单的数组,我想在jqPlot上使用它,并且需要这样的格式数据:
[[[x1, sin(x1)], [x2, sin(x2)], ...]]
Run Code Online (Sandbox Code Playgroud)
我的阵列是:
$array_1 = [ "Meong", "Aumix" ];
$array_2 = [ 3, 2 ];
Run Code Online (Sandbox Code Playgroud)
如何将其与最终输出组合/合并,如下所示:
$output = [[['Meong', 3], ['Aumix', 2]]];
Run Code Online (Sandbox Code Playgroud)
我尝试使用标准jQuery合并并结合不起作用.请帮忙.