标签: jqplot

JQuery:JQPlot中的TickInterval

如何在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)

jquery jqplot

3
推荐指数
1
解决办法
2万
查看次数

如何更改Primefaces/jqPlot折线图的标签颜色?

我有一个简单的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)

有什么想法吗?

css jsf jqplot primefaces

3
推荐指数
1
解决办法
1万
查看次数

JqPlot 1.0如何使用日期轴和图例创建折线图

首先,提前感谢您的答案.

这是我的问题.我有一个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)

jquery date legend jqplot

3
推荐指数
1
解决办法
9860
查看次数

jqplot Bar Charts忽略了我的浮动数字.如何修复它们?

我正在尝试使用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/

我怎样才能解决这个问题?

jqplot

3
推荐指数
1
解决办法
3805
查看次数

JQPlot多线图 - 每小时数据比较

我正在尝试用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)

jquery jqplot

3
推荐指数
1
解决办法
7601
查看次数

JQPlot隐藏图例中的线条单击

可能重复:
动态绘图图形 - 通过单击图形上的图例文本或框来显示隐藏系列

我正在使用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)

javascript graph legend show-hide jqplot

3
推荐指数
1
解决办法
5905
查看次数

jqplot中的双轴图表

是否可以使用jqplot获得双轴图表

任何人都可以分享相同的例子

jqplot

3
推荐指数
1
解决办法
9892
查看次数

p:带有DateTime轴的图表

我正在尝试使用<p:chart>Primefaces 5.1 的组件创建折线图.

我需要X轴显示时间.像这样的东西:

在此输入图像描述

但只针对旧版本的文档.

我发现了几件事:

但是在5.1版本中没有这样的标签<p:lineChart>,甚至没有属性extender="".

我根据展示创建了我的图表:

但这个例子并没有多大帮助,因为它只适用于日期.并且复杂化为String.我需要时间.

我想知道是否有人已经在较新版本的Primefaces中创建了类似的东西.

编辑:

再搜索一下,我找到了这个主题:

我使用了它提到的例子,我可以使它工作.

我可以看到,当它是DateAxis时需要设置axis.setMax().最后看起来像这样:

在此输入图像描述

它按我的需要工作,但有两件事我不明白:

第一:需要设置的原因axis.setMax().

第二:这个模式用的是axis.setTickFormat("%H:%#M:%S")什么?

charts jqplot primefaces

3
推荐指数
1
解决办法
1万
查看次数

如何在primefaces 5.2中使用折线图扩展器属性

我正在使用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 xhtml jsf jqplot primefaces

3
推荐指数
1
解决办法
7399
查看次数

把这个数组和jQuery结合起来很困惑

我在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合并并结合不起作用.请帮忙.

javascript arrays jquery jqplot

3
推荐指数
1
解决办法
69
查看次数

标签 统计

jqplot ×10

jquery ×4

javascript ×3

primefaces ×3

jsf ×2

legend ×2

arrays ×1

charts ×1

css ×1

date ×1

graph ×1

show-hide ×1

xhtml ×1