一直在搜索,找不到我想要的东西.需要将多个系列加载到一个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) json需要采用以下格式:
var data = [
['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14],
['Out of home', 16],['Commuting', 7], ['Orientation', 9]
];
Run Code Online (Sandbox Code Playgroud)
但在我的动作方法中,我无法弄清楚如何构造以该格式呈现的json.这是我有的:
var json = new[] {
new[] {"Pending", summaryData.Sum(a => (int)a.Pending).ToString() },
new[] {"Completed", summaryData.Sum(a => (int)a.Completed).ToString()}
};
return Json(json, JsonRequestBehavior.AllowGet);
Run Code Online (Sandbox Code Playgroud)
返回以下JSON:
[["Pending","146"],["Completed","914"]]
Run Code Online (Sandbox Code Playgroud)
这很接近,除了它们是数字值周围的引号,jqPlot似乎不喜欢它.不幸的是,如果我尝试在其上执行Int32.Parse(...),我会得到一个异常.
任何想法如何最好地做到这一点?
谢谢
好的,我有条形图.它基本上可以工作......但是y轴上的标签有点长并且包裹然后相互碰撞.
我已经尝试过改变css,但它被JS覆盖了.我尝试通过jqplot库扫描,找出它发生的地方,但我迷路了.有任何想法吗?我可以设置一个选项吗?
你可以在这里看到:

这是我的html文件:
<html>
<head>
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.barRenderer.min.js"></script>
<script language="javascript" type="text/javascript" src="jqplot.categoryAxisRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<script>
$(function() {
graph_me('chart1',[ 'This is a label', 'This is another label..', 'Is this too long? This looks like it might break','Im not sure, but '], [40, 20, 5, 1]);
});
function graph_me(div_name, labels_in, values_in) {
var labels = labels_in.reverse();
var values = values_in.reverse();
$.jqplot(div_name, [values], …Run Code Online (Sandbox Code Playgroud) 我有X值从0到55的数据.我希望将这些值看作刻度标签中的自定义文本.理想情况下,我想指定一些回调,比如
function tickLabel(tickValue) {
return "This is " + tickValue;
}
Run Code Online (Sandbox Code Playgroud)
可能吗?
我有一个带有两条数据线的jqplot图表.只有一个应该启用荧光笔.我试过这个:
series:[
{
highlighter: {
formatString: "",
show: false
}
},
{
highlighter: {
formatString: "Day %s: %d",
show: true
}
}
]
Run Code Online (Sandbox Code Playgroud)
但不幸的是,这不起作用:荧光笔在第一行显示一个小空点,而它应该什么都不显示.
如何在一张图表上显示荧光笔而不在另一张图表上?
我使用jqplot,我的日期是我的x轴.
我使用DateAxisRenderer插件,但我想将日期转换为我当前的语言环境.
例如,对于英语
Jan 2012
Feb 2012...
Run Code Online (Sandbox Code Playgroud)
而对于法国人
Jan 2012
Fév 2012...
Run Code Online (Sandbox Code Playgroud)
有任何想法吗?
我需要将数值数据显示为网页上的图表,并且我发现JQPlot看起来是最简单的JQuery库之一,也是免费的.然而,尽管我努力在他们的网页上查看示例和教程,但我根本无法在页面上显示任何类型的图表.这是我的代码,仅用于开始的基本图表:
<html>
<head>
<title>Testing plots functions</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="JQPlot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="JQPlot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});
</script>
</head>
<body>
Here is the start of the page...<br>
<div id="chart1"></div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
大部分代码都直接来自他们的示例网页(http://www.jqplot.com/tests/line-charts.php),所以我不知道为什么页面上没有发生任何事情.
我想在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) jqplot ×10
jquery ×6
javascript ×5
asp.net-mvc ×1
c# ×1
canvas ×1
charts ×1
css ×1
html ×1
jsf-2 ×1
json ×1
primefaces ×1
rendering ×1