标签: jqplot

我每月使用OHLC渲染器获得一系列数据,每个数据点都有一个数据点.我试图用jqplot显示它.它看起来很好,除了数据点太瘦了,因为jqplot显示它们好像它们只适用于那一天.当我取出日期,并指定月份和年份时,jqplot崩溃了.

我的数据如下:

    [
        [
            "01/01/2008", 
            8152.9054008104704, 
            2612.7075024153296, 
            5382.8064516128998
        ], 
        // ...
        [
            "03/01/2008", 
            7554.0494491662403, 
            2086.69248631764, 
            4820.3709677419401
       ], 
    ]

这种配置是否可行,或者我应该自己破解代码？该文件没有明确说明如何做到这一点.

我应该修改什么代码？DateAxisRenderer？OHLCRenderer？

我想创建这种输出

var s1 = [['Sony',7],['Samsung',5],['LG',8]];

这样我就可以用它来传递我的图形作为变量

从我的ajax的resutl出来

success: function(data){

    //code to extract the data value here

    var s1= need to create the data here

    $.jqplot('chart',[s1],{ blah blah blah

}

success函数中的"data"返回此表格布局

<table id="tblResult">
    <tr class="tblRows">
        <td class="clsPhone">Sony</td><td class="clsRating">7</td>
    </tr>
    <tr class="tblRows">
        <td class="clsPhone">Samsung</td><td class="clsRating">5</td>
    </tr>
    <tr class="tblRows">
        <td class="clsPhone">LG</td><td class="clsRating">8</td>
    </tr>
</table>

你能帮助我为此创造逻辑吗？

提前致谢

编辑: 我正在寻找类似以下的解决方案:

var s1;
$(".tblRows").each(function(){
    // here I don't know exactly on what to do
    //s1.push($(".clsPhone").text(),$(".clsRating").text()));
});
// all I wanted is to make the resul s1=[['Sony',7],['Samsung',5],['LG',8]]; …

我有这个jqplot条形图.条形图的当前显示是垂直显示的,我想要水平显示它.

如何设置jqplot属性,以便我可以水平显示图形并保留输出的百分比值？

我希望你能帮助我做到这一点.谢谢 :)

这是代码

附加的Scirpts

<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
<script src="../jquery-1.4.4.min.js" language="javascript" type="text/javascript" ></script>
<script src="../jquery.jqplot.js" language="javascript" type="text/javascript" ></script>
<script src="../plugins/jqplot.categoryAxisRenderer.js" language="javascript" type="text/javascript" ></script>
<script src="../plugins/jqplot.dateAxisRenderer.js" language="javascript" type="text/javascript" ></script>
<script src="../plugins/jqplot.barRenderer.js" language="javascript" type="text/javascript" ></script>
<script src="../plugins/jqplot.pointLabels.js" language="javascript" type="text/javascript" ></script>

JQuery初始化

$(document).ready(function(){
    $.jqplot.config.enablePlugins = true;       
    line1 = [20, 0];
    plot2 = $.jqplot('chart2', [line1], { 
        seriesColors: ["#82BC24","#363636"],
        seriesDefaults: {
            renderer: $.jqplot.BarRenderer,
            rendererOptions:{barMargin: 25}, 
            yaxis:'y2axis',
            shadow: false
        },
        axes: {
            xaxis:{
                ticks:[2010, 2040], 
                renderer:$.jqplot.CategoryAxisRenderer, 
                tickOptions:{markSize:0}
            },
            y2axis:{ticks:[0, 100], tickOptions:{formatString:'%d\%'}} …

我有以下jQuery代码:

$(document).ready(function () {
        var group = 'test';
        $.ajax({
            type: "POST",
            async: false,
            url: "/validate.asmx/GetGraphData",
            contentType: "application/json;",
            data: "{'groupBy': '" + group + "'}",
            dataType: 'json',
            success: function (data) {
                Plot(data.d);
            }
        });
    });

    function Plot(dataIn) {
        alert(dataIn);
        $.jqplot('chartcontainer', [[[ 'test1', 1 ], [ 'test2', 5]]],
        {
            seriesDefaults: {
                renderer: $.jqplot.PieRenderer,
                rendererOptions: {
                    showDataLabels: true
                }
            },
            legend: { show: true, location: 'e' }
        }
            );
    }

webmethod(切割后进行测试)看起来像这样:

[WebMethod]
    public string GetGraphData(string groupBy)
    {
        PaymentModelDataContext db = new PaymentModelDataContext();
        var …

好的,这应该相对简单:

• 我正在添加一个圆环图,它确实有效
• 但是,"图例"(Head (+)与相应的颜色一起)不会显示.

代码:

$(document).ready(function(){
  var s1 = [['Head (+)',<?php echo $headScore; ?>], ['Head (-)',<?php echo 6-$headScore; ?>]];
  var s2 = [['Body (+)',<?php echo $totalScore-$headScore; ?>], ['Body (-)',<?php echo 7-$totalScore+$headScore; ?>]];

  var plot3 = $.jqplot('linkchart', [s1,s2], {
      title:"Score Profile",
    seriesDefaults: {
      // make this a donut chart.
      renderer:$.jqplot.DonutRenderer,
      rendererOptions:{
        // Donut's can be cut into slices like pies.
        sliceMargin: 3,
        // Pies and donuts can start at any arbitrary angle.
        startAngle: -90,
        showDataLabels: false
      },
      legend: { …

我正在使用jQPlot并禁用我的图表上的网格线(drawGridlines:false).但是,我想在yaxis = 0处有一行,我也想确保0出现.这很容易吗？

谢谢!

如何在条形图中显示条形图上的数据点？

我不想使用数据提示或工具提示,只有当它们被鼠标悬停时才会突出显示数据点.

我想在条形图上始终显示数据点.

有没有正确的方法来获得它？

谢谢.

我想要这样

以下是我的代码

<p:barChart id="barChartId" value="#{myBean.myModel}"             
        orientation="horizontal"             
        stacked="true" extender="ext" animate="true" shadow="false" />              
<h:outputScript>         
  function ext() {  
    this.cfg.highlighter = {
             useAxesFormatters: false,
             tooltipAxes: 'x'   
    };      
    this.cfg.legend = {
            show: true,
            location: 'ne',
            placement: 'outside'
    }; 
    this.cfg.seriesDefaults = {
            pointLabels : { show: true },
    };              
  }        
</h:outputScript>

这里,荧光笔和图例工作正常,但点标签没有显示在栏上

我正在开发一个Web应用程序,我非常喜欢JQPlot提供的拖动图.我在他们的网站上提到了这个例子:http: //www.jqplot.com/deploy/dist/examples/customHighlighterCursorTrendline.html

据我所知,为了让JQPlot正常工作,我需要包含jQuery,jQuery jqplot函数和一些样式文件.JQPlot下载提供了自己的jquery.js和jquery.jqplot.js.

另外,我也使用Knockout.js作为这个项目的一部分,我将包含标准的jquery-1.9.1.js文件以使其正常工作.

但是,"$"的定义文件是jquery-1.9.1.js,并且由于JQPlot提供了自己的jQuery文件,因此必然存在某种冲突,使jqplot函数无法识别.这有解决方法吗？这是我的HTML代码:

@model FluidBedSimulation.Models.BedState
@using Newtonsoft.Json

@{
    ViewBag.Title = "Index";
}



<script type="text/javascript" src="../Scripts/jqPlot/jquery.min.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/jquery.jqplot.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/plugins/jqplot.dragable.min.js"></script>
<script type="text/javascript" src="../Scripts/jqPlot/plugins/jqplot.trendline.min.js"></script>
<link rel="stylesheet" type="text/css" href="../Scripts/jqPlot/jquery.jqplot.min.css" />

<h2>Index</h2>

@if (false)
{
    <script src="../../Scripts/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="../../Scripts/knockout-2.2.0.js" type="text/javascript"></script>
    <script src="../../Scripts/knockout.mapping-latest.js" type="text/javascript"></script>

}
<script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout-2.2.0.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/knockout.mapping-latest.js")" type="text/javascript"></script>







<script type ="text/javascript">
    $(document).ready(function () {


        $.jqplot.config.enablePlugins = …

我在我的网站上使用jqplot使用以下代码

    $(document).ready(function(){
var xticks = [ '0', '1', '2', '3', '4','5', '6', '7', '8', '9', '10','11', '13','14','15','16','17','18','19','20','21','22','23'];
  var data1 = [2,4,6,2,2,2,1,1,1,1,1,1,1,1,1,1,1,1,2,6,3,1,2,2,0,0,0,0,0,0,2,5,6,6,7,6,6,6,5,7,7,6,1,0,0,0,0];
  var plot2 = jQuery.jqplot ('chart1', [data1], 
    {
            animate : true,
            // Will animate plot on calls to plot1.replot({resetAxes:true})
            animateReplot : true,
            seriesDefaults : {
                pointLabels : {
                    show : true,
                    hideZeros : true,
                    location  : 's',
                    ypadding  : 12
                },
                renderer : $.jqplot.BarRenderer,
                rendererOptions : {
                    varyBarColor : true,
                    barPadding : -20
                }
            },
            axes : {
                xaxis : …

我使用jqplot作为我的图模型.这里我想绘制2 y轴,时间为x轴.我有一个例子用单参数线图绘制2 y轴.

让我解释一下我的情况,我使用y1,y2轴和带有时间戳的公共x轴.对于y1轴让我有s1,s3系列值和y2轴让我有s2,s4系列值.在这里,我想绘制图形.

但在我的情况下,s1,s3,s4用x和y1轴的参考绘制,s2用y2轴绘制x,如何通过系列s1,s3为y1即收益和s2,s4为y2轴即数量页面浏览量.

以此jsfiddle.net/yRLJF/94/为例