标签: jqplot

需要使用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
查看次数

如何在ASP.NET MVC C#中为jqPlot图表返回多维数组作为JSON

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(...),我会得到一个异常.

任何想法如何最好地做到这一点?

谢谢

c# asp.net-mvc json jqplot

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

在jqplot中更改y轴标签区域的宽度

好的,我有条形图.它基本上可以工作......但是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)

javascript css jquery jqplot

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

jqPlot自定义刻度标签

我有X值从0到55的数据.我希望将这些值看作刻度标签中的自定义文本.理想情况下,我想指定一些回调,比如

function tickLabel(tickValue) {
    return "This is " + tickValue;
}
Run Code Online (Sandbox Code Playgroud)

可能吗?

javascript jqplot

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

jqplot只在一张图表上显示荧光笔

我有一个带有两条数据线的jqplot图表.只有一个应该启用荧光笔.我试过这个:

series:[
    {
        highlighter: {
            formatString: "",
            show: false
        }
    },
    {
        highlighter: {
            formatString: "Day %s: %d",
            show: true
        }
    }
]
Run Code Online (Sandbox Code Playgroud)

但不幸的是,这不起作用:荧光笔在第一行显示一个小空点,而它应该什么都不显示.

如何在一张图表上显示荧光笔而不在另一张图表上?

javascript jquery charts jqplot jqplot-highlighter

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

jqplot - 日期轴渲染器:国际化

我使用jqplot,我的日期是我的x轴.

我使用DateAxisRenderer插件,但我想将日期转换为我当前的语言环境.

例如,对于英语

Jan 2012 
Feb 2012...
Run Code Online (Sandbox Code Playgroud)

对于法国人

Jan 2012
Fév 2012...
Run Code Online (Sandbox Code Playgroud)

有任何想法吗?

jquery internationalization jqplot

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

JQPlot基本图表不显示

我需要将数值数据显示为网页上的图表,并且我发现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),所以我不知道为什么页面上没有发生任何事情.

html javascript jquery rendering jqplot

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

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

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

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

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

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

提前致谢!

javascript jquery canvas jqplot

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

如何在jqplot的线图中打破图形

如果缺少值,如何断开图形线,并在下一个值被激活后再次开始.

jquery jqplot

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

使用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
查看次数