标签: jqplot

我想在jQuery手风琴中绘制图形,但它会导致图形被切断并显示比例.有人得到了解决方案吗？

如何在jqplot中创建一个图表,使其所有的滴答均匀整数？例如,我有

yaxis: {numberTicks:16, min: 0}

我想拥有它以使图表从0-15延伸,如果绘图点超过15,图表将变为0-30.这可行吗？

我正在使用jqPlot,并想知道当有人更改窗口大小时是否有一种方法可以调整大小/重绘它.我知道有一个重绘功能,但我不确定如何真正调用它...有人可以给我一些关于如何做这个的指示？

这是我的代码:

$.jqplot('chart1', [line1], {
              title:'Users Per Day',
              axes:{
                xaxis:{
                  renderer:$.jqplot.DateAxisRenderer,
                  tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
               //   tickInterval:'1 week',
                  tickOptions:{
                    formatString:'%b %#d, %y',
                    angle:-30
                  } 
                },
                yaxis:{
                  tickOptions:{
                    formatString:'%.1f'
                    }
                }
              },
              highlighter: {
                show: true,
                sizeAdjust: 7.5
              },
              cursor: {
                  show: false
                  /*show: true,
                  zoom: true,
                  showTooltip: false */
              }
          });

'line1'是在此代码之前填充的数组,chart1是绘制图表的div.

有任何想法吗？

谢谢,

克雷格

如何在JQPlot中自定义图形周围的黑色边框？我广泛搜索CSS文件,找不到任何东西.

[UPDATE]

如果你不明白我的意思,请看这个图像:http: //img339.imageshack.us/img339/5796/jqplot.png

谢谢

我在使用jqPlot样式时遇到了一些麻烦.目前我有这个:

这需要相当多的摆弄才能得到它,但现在我有一个问题 - 左边的线!我不知道如何删除它,因为我实际上并不知道它是什么!

这是我到目前为止的代码.

  plot = $.jqplot('chart', [values], {
    animate: !$.jqplot.use_excanvas,
    seriesDefaults: {
      renderer: $.jqplot.BarRenderer,
      rendererOptions: {
        varyBarColor: true,
      },
      pointLabels: { 
        show: true,
      },
      shadow: false,
    },
    axes: {
      xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        ticks: keys,
        tickOptions: {
          showGridline: false,
          showMark: false,
          fontFamily: 'DosisBold',
          textColor: '#ffffff',
          fontSize: 'larger'
        },
      },
      yaxis: {
        tickOptions: {
          showGridline: false,
          showMark: false,
          showLabel: false,
          shadow: false,
        },
      },

    },
    seriesColors: ["#bc4427", "#df8321", "#949629", "#5e8c41", "#739c9b", "#3483b3"],
    grid: {
      background: '#1d1d1d',
      drawGridLines: false,
      borderWidth: …

似乎没有得到水平线出现,我看了以前的帖子,但没有任何有效...也许我错过了一个导入？图表本身很好地显示出来.

    $(document).ready(function(){
    var line1 = [['January', 1], ['February', 2], ['March', 3],
    ['April', 4], ['May', 5], ['June', 6], ['July', 7], ['August', 8],
    ['September', 9], ['October', 10], ['November', 11], ['December', 12]];
    //alert(<?=$graph[1]['st']?>);
    var plot1 = $.jqplot('settle_graph', [line1], {
        title: 'Monthly Settlements',
        grid:{drawBorder: false, shadow:false},
        canvasOverlay: {
          show: true,
          objects: [
            {horizontalLine: {
              name: '# Settlements from Budget',
              y: 6,
              lineWidth: 3,
              color: '#444444',
              shadow: true,
              show:true,                  
              lineCap: 'butt',
              xOffset: 0
            }}
          ]
        },     
        series:[{renderer:$.jqplot.BarRenderer}],
        seriesDefaults: {
            rendererOptions: {
                varyBarColor : true,
                barPadding: …

我试图了解当未指定宽度时jqplot如何计算条的宽度.说我有以下图表:

$.jqplot(chartDiv.attr("id"), [
    [
        ['2013-02-15', 0],
        ['2013-03-01', 2],
        ['2013-03-15', 4],
        ['2013-03-29', 6],
        ['2013-04-12', 8],
        ['2013-04-26', 10],
        ['2013-05-10', 12],
        ['2013-05-24', 14],
        ['2013-06-07', 16],
        ['2013-06-21', 18],
        ['2013-07-05', 20],
        ['2013-07-19', 22],
        ['2013-08-02', 24],
        ['2013-08-16', 26],
        ['2013-08-30', 28],
        ['2013-09-13', 30],
        ['2013-09-27', 32],
        ['2013-10-11', 34],
        ['2013-10-25', 36],
        ['2013-11-08', 38], , ], ], {


    axes: {
        xaxis: {
            renderer: $.jqplot.DateAxisRenderer,
            min: '2013-1-20',
            max: '2013-12-1',
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
            tickInterval: '14 days',
            tickOptions: {
                angle: 45,
                formatString: '%d/%m/%Y',
            },
        }
    },
    series: [{
        xaxis: 'xaxis',
        yaxis: 'yaxis',
        renderer: $.jqplot.BarRenderer, …

我有一个多色的条形图,看起来像这样

我用的代码:

$(document).ready(function(){
    var line1 = [['Kliks', 119],['Unieke kliks', 91],['Afgemeld', 12]];

    $('#chart3').jqplot([line1], {
        seriesColors:['#74b6e7', '#003246', '#e22a20'],
        pointLabels:{show:true, stackedValue: true},
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {
                varyBarColor: true
            }
        },
        series:[
             {pointLabels:{
                show: true,
                labels:['119', '91', '12']
              }}],
        axes:{
            xaxis:{
                renderer: $.jqplot.CategoryAxisRenderer
            }
        }
    });
});

我想显示条形点值,以使图表看起来像这样

这可能吗？我尝试过使用pointLabels但它们没有显示

series:[
    {pointLabels:{
        show: true,
        labels:['119', '91', '12']
}}],

我有一个多系列图表,并希望不仅突出x和y该点的坐标,也是series名.

可能吗？

这是我的第一个问题.

我需要格式化一个jqPlot图表点标签,如下所示:50(100%)格式化数字和显示百分比.

var s1 = [32, 28, 18, 6];

var ticks = ['0-20 kph', '21-40 kph', '41-60 kph', '61+ kph'];

plot1 = $.jqplot('bar-graph', [s1], {
    animate: !$.jqplot.use_excanvas,
    title: 'Gráficos de velocidade',
    captureRightClick: true,
    seriesColors: ['green', 'yellow', 'orange', 'red'],
    seriesDefaults: {
        renderer: $.jqplot.BarRenderer,
        pointLabels: {
            show: true,
            formatString: '%s (?%%)' 
        },
        rendererOptions: {
            varyBarColor: true
        }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticks
        }
    },
    highlighter: {
        show: false
    }
});

在jsFinddle上:http://jsfiddle.net/evandroprogram/r3PUE/10/

谢谢.