我正在寻找一个图表库,并在JQplot上注意到这个库看起来令人印象深刻.然而,我没有得到关于谷歌图表 API的(评论)的更多信息 ,有没有人比较Jqplot和谷歌图表api的专业和缺点?我是否需要使用GWT来使用Google Charts API?
背景
我有一个使用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等...)
如果有人可以帮我解决这个问题,我真的很感激.我们使用Jqplot绘制一些统计数据,并像缩放功能一样.
具体来说,我们想要使用示例
http://www.jqplot.com/deploy/dist/examples/zoom1.html 和
http://www.jqplot.com/deploy/dist/examples/zoomOptions.html
我们需要做的一件事是重新计算我们在页面上显示的一些值,如标准偏差,平均值等,放大后图中可见的点.为此,我们需要获取那里的数据点列表(我们放大后在图表上保留.所以理想情况下我们正在查看一种方法,该方法在放大后返回图表中可见的当前数据集.
我查找了API文档,但似乎没有这样的方法.所以如果有人帮我解决这个问题,我真的很感激.
谢谢....阿米特
我试图动态地将数据点添加到jqplot作为AJAX接收数据的结果,但我没有看到实现此目的的方法.这不可能吗?
如果不是,那么可以使用哪些其他软件包来完成相同的基本图形并允许动态数据?
一直在搜索,找不到我想要的东西.需要将多个系列加载到一个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) 随着时间的推移,我通过更改数据并重新绘制它们来"动画化"图表.
// 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) 请问我有一个页面,在页面中我有两个饼图,我想为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倍
我很长一段时间都在使用jqplot图表库.
我不想显示y2轴(即当我使用多个轴/系列时)通过文档并发现'show:false'不会显示轴.
链接到这里:http://www.jqplot.com/docs/files/jqplot-core-js.html#Axis.show
但这似乎不起作用.
任何帮助将不胜感激.提前致谢
我想在jqplot图表上叠加一个标签.标签应包含文本或理想情况下的任何标记.我已经检查了文档和示例,但在主jqplot图表区域中找不到任意标签的示例.
jqplot的相关功能:canvasOverlay用于在图表上绘制任意线条.此外,"标题"标签存在,但位于图表之外.
看起来这应该很简单.一些选择:
提前致谢!
我想在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)