标签: jqplot

Jqplot vs Google chart API

我正在寻找一个图表库,并在JQplot上注意到这个库看起来令人印象深刻.然而,我没有得到关于谷歌图表 API的(评论)的更多信息 ,有没有人比较Jqplot和谷歌图表api的专业和缺点?我是否需要使用GWT来使用Google Charts API?

google-visualization jqplot

7
推荐指数
1
解决办法
4656
查看次数

Primefaces chart + jqplot extender - y轴的舍入值

背景

我有一个使用jqplot选项扩展的primefaces折线图(x上的日期,y上的整数> = 0):

function extender() {
        this.cfg.axes = {
            xaxis : {
                renderer : $.jqplot.DateAxisRenderer, 
                rendererOptions : {
                    tickRenderer:$.jqplot.CanvasAxisTickRenderer
                },
                tickOptions : { 
                    fontSize:'10pt',
                    fontFamily:'Tahoma', 
                    angle:-40,                     
                    formatString:'%b-%y'
                },
                tickInterval:'2592000000'
            },
            yaxis : {
                min: 0,
                rendererOptions : {
                    tickRenderer:$.jqplot.CanvasAxisTickRenderer,
                },
                tickOptions: {
                    fontSize:'10pt', 
                    fontFamily:'Tahoma', 
                    angle:0,
                    formatString: '%d'
                }
            },
        };
        this.cfg.axes.xaxis.ticks = this.cfg.categories;
    }
Run Code Online (Sandbox Code Playgroud)

我正在使用jqplot扩展器在x轴上有自定义日期间隔,这是正常工作:

工作正常

问题

当我min: 0在y轴上使用该选项时,数字的格式变得非常时髦,特别是当有小值时:

分数

请注意,minYprimefaces中的属性不起作用(可能是因为扩展程序覆盖了它)

为了解决这个问题,我使用了formatString: %d.它有效,但它会产生滴答数量的问题:

在此输入图像描述

正如您在屏幕截图中看到的那样,值1的行数次.

如何确保我在y轴上没有多次获得相同的值?

我真的不能有一个静态的刻度数,因为当数据变大时(比如大约100),我确实想要y轴上的几个值(例如20,40等...)

jsf graph java-ee jqplot primefaces

7
推荐指数
1
解决办法
9896
查看次数

缩放jqplot后获取画布中的数据点列表

如果有人可以帮我解决这个问题,我真的很感激.我们使用Jqplot绘制一些统计数据,并像缩放功能一样.

具体来说,我们想要使用示例

http://www.jqplot.com/deploy/dist/examples/zoom1.html

http://www.jqplot.com/deploy/dist/examples/zoomOptions.html

我们需要做的一件事是重新计算我们在页面上显示的一些值,如标准偏差,平均值等,放大后图中可见的点.为此,我们需要获取那里的数据点列表(我们放大后在图表上保留.所以理想情况下我们正在查看一种方法,该方法在放大后返回图表中可见的当前数据集.

我查找了API文档,但似乎没有这样的方法.所以如果有人帮我解决这个问题,我真的很感激.

谢谢....阿米特

javascript jquery graph jqplot

7
推荐指数
1
解决办法
2855
查看次数

JavaScript图表 - 动态添加数据点

我试图动态地将数据点添加到jqplot作为AJAX接收数据的结果,但我没有看到实现此目的的方法.这不可能吗?

如果不是,那么可以使用哪些其他软件包来完成相同的基本图形并允许动态数据?

javascript ajax charts canvas jqplot

6
推荐指数
1
解决办法
8060
查看次数

需要使用json文件中的多个系列,基于日期的数据加载jqplot的示例

一直在搜索,找不到我想要的东西.需要将多个系列加载到一个jqplot中,每个系列都来自自己的数据文件.

这里的示例http://www.jqplot.com/tests/data-renderers.php确实显示了如何从文件加载系列,但是当我将文件转换为具有日期数据时,它会停止工作,可能只是格式化问题,但无法解决.我究竟做错了什么?

以下是txt文件中的数据:[["7/11/2011 04:00:00 am",85.0],["7/12/2011 04:00:00 AM",87.4],["7/13/2011 04:00:00 AM",90.0]]

这是代码:

<script class="code" type="text/javascript">$(document).ready(function(){
    var line = [ ];
var ajaxDataRenderer = function(url, plot) {
    var ret = null;
    $.ajax({
        // have to use synchronous here, else returns before data is fetched
        async: false,
        url: url,
        dataType:'json',
        success: function(data) {
            ret = data;
        }
    });
    return ret;
};

var jsonurl = "./jsondata1.txt";

plo12 = $.jqplot('chart2', jsonurl,{
    title: 'AJAX JSON Data Renderer',
    dataRenderer: ajaxDataRenderer,
    axes: {
      xaxis: {
          renderer:$.jqplot.DateAxisRenderer,
          tickInterval: …
Run Code Online (Sandbox Code Playgroud)

jqplot

6
推荐指数
1
解决办法
6126
查看次数

如何使用jQuery和jQplot动画图表(更新数据)

随着时间的推移,我通过更改数据并重新绘制它们来"动画化"图表.

// initialization
var data = ...
var targetPlot = $.jqplot('#diagram', data, diagramOptions);
Run Code Online (Sandbox Code Playgroud)

一段时间后,我将以某种方式更改数据,并希望更新图表.以下解决方案有效:

// update Data
targetPlot.data = ...;
// remove old diagram
$('#<%= "diagram" + diagram.id.to_s %>container').empty();
// redraw
targetPlot = $.jqplot('#diagram', data, diagramOptions);
Run Code Online (Sandbox Code Playgroud)

这是一个完整的重绘.由于大量数据和短暂的间隔,jQPlot占用大量内存,图表闪烁.

怎么做对吗?

使用redraw-function的解决方案只绘制旧图:

// update Data
targetPlot.data = ...;
targetPlot.redraw();
Run Code Online (Sandbox Code Playgroud)

javascript diagram jquery jquery-plugins jqplot

6
推荐指数
1
解决办法
5930
查看次数

Jqplot饼图的背景颜色

请问我有一个页面,在页面中我有两个饼图,我想为2个图表显示不同的背景颜色,但它嵌入在css文件中!有没有选择使用任何颜色?还是让它透明?我的代码:

 PieTimer[index] = jQuery.jqplot(PieTimerId,

 TimerValuesArray,
 {
 seriesDefaults: {

 shadow: false,

 seriesColors: ["#13e837", "#6e869b"],

 renderer: jQuery.jqplot.PieRenderer,

 rendererOptions: {

 highlightMouseOver: false,

 diameter: 40,

 padding: 0,

 showDataLabels: false,

startAngle: 270,
sliceMargin: 0,

shadowOffset: 0,

shadowAlpha: 0,


shadowDepth: 0,

 drawBorder: false,

 shadow: false,

 borderWidth: 0

 }

 },

 legend: { show: false, location: 'w'}

 }

 );
Run Code Online (Sandbox Code Playgroud)

我想知道我是否可以在绘制图表时设置属性(例如:backgroundcolor ...)?10倍

javascript css jquery jqplot pie-chart

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

jqplot - 不想显示/显示y轴

我很长一段时间都在使用jqplot图表库.

我不想显示y2轴(即当我使用多个轴/系列时)通过文档并发现'show:false'不会显示轴.

链接到这里:http://www.jqplot.com/docs/files/jqplot-core-js.html#Axis.show

但这似乎不起作用.

任何帮助将不胜感激.提前致谢

axis show jqplot

6
推荐指数
1
解决办法
6164
查看次数

如何将文本添加为​​jqplot canvasOverlay?

我想在jqplot图表上叠加一个标签.标签应包含文本或理想情况下的任何标记.我已经检查了文档示例,但在主jqplot图表区域中找不到任意标签的示例.

jqplot的相关功能:canvasOverlay用于在图表上绘制任意线条.此外,"标题"标签存在,但位于图表之外.

看起来这应该很简单.一些选择:

  1. 更改主标签的jqplot CSS以将其移动到图表内.
  2. jqplot中的新标签.
  3. 问题范围实际上是在jqplot之外,适当的解决方案是使用Canvas的通用解决方案.

提前致谢!

javascript jquery canvas jqplot

6
推荐指数
2
解决办法
4408
查看次数

使用PrimeFaces图表中的jqPlot插件在图表上绘制线条

我想在PrimeFaces(v5.3)图表上绘制一些额外的行,特别是在线图上.查看jqPlot示例(PrimeFaces使用jqPlot绘制图表),此示例显示了我想要做的事情.

我使用了这个答案中描述的方法.

通过设置扩展程序,我可以运行自己的javascript函数,这允许我更改不同类型的配置.

创建模式时的Java:

private LineChartModel initLinearModel()
{
    LineChartModel model = new LineChartModel();
    model.setExtender("chartExtender");

    LineChartSeries series1 = new LineChartSeries();
    series1.setLabel("Series 1");
    series1.set(1, 2);
    series1.set(2, 1);
    series1.set(3, 3);
    series1.set(4, 6);
    series1.set(5, 8);

    model.addSeries(series1);

    return model;
}
Run Code Online (Sandbox Code Playgroud)

XHTML:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:p="http://primefaces.org/ui">

<h:outputScript library="jqplot-plugin"
    name="jqplot.canvasOverlay.min.js" />
<h:outputScript library="js" name="extra_config.js" />

<h:head>
    <title>Chart</title>
</h:head>

<h:body>

    <p:chart type="line" model="#{primeChart.lineModel1}"
        style="height:300px;" />

</h:body>

</html>
Run Code Online (Sandbox Code Playgroud)

Javascript功能:

function chartExtender() {
    this.cfg.grid = …
Run Code Online (Sandbox Code Playgroud)

jqplot primefaces jsf-2

6
推荐指数
1
解决办法
2737
查看次数