将jqplot放在jquery选项卡中

Question

我正在使用jqplots在我的网站上以图形方式显示数据。我可以根据我们的要求绘制图表。现在我需要将这些图放在jQuery UI选项卡中。

我可以在第一个标签中获取图片，该标签在页面加载时处于活动状态。但是我无法获取其他标签中存在的其余图表，它们是不可见的。

我无法弄清楚原因，请在这方面帮助我。

Answer 1

从你的问题中没有附加代码，所以在JSFiddle http://jsfiddle.net/meccanismocomplesso/9fdJm/1/上比较你的代码 我希望这可能有用（这是“使用jqPlot，Highcharts和D3开始JavaScript图表”一书的一个例子）。

完美的工作。在不同的选项卡中有三种不同类型的图表，它们都是可见的。

.

Answer 2

首先提到jqPlot代码，然后是选项卡代码。即使我遇到了同样的问题，现在已经修好了。

//$.jplot code 

//$("#tabs").tabs();

Answer 3

@ meccanismo.complesso有趣！我正在使用你的jsfiddle（http://jsfiddle.net/meccanismocomplesso/9fdJm/1/）来探索将jqplot对象运行到jQuery UI选项卡中的可能性。因为我面临同样的问题，即只在一个标签中显示内容（最初是活动的），并且看到所提供的示例将所有逻辑全部放在一起，所以认为这可以在不久的将来帮助某人... < / p>

        [http://jsfiddle.net/zpLxbue8/][1]

使用激活和创建来触发jqplot

，而不是仅在jQuery UI标签之后或之前加载函数

Answer 4

http://jsfiddle.net/zpLxbue8/ [jsFiddle运行良好的示例... jQuery UI选项卡通过使用jQplot插件显示不同类型的图形] [1]

js内容-由于平台抽象层而被省略。script type =“ text / javascript

jQuery(document).ready(function($){
 var $=$.noconflict();

 function render(){
 var bar1 = [['Apples',11],['Oranges',7],['Pears',3],['Bananas',9],['Lemons',5]];   
  var data1 = [3,1,2,3,5,4];
  var data2 = [4,3,3,4,5,6];
  var data3 = [9,10,8,7,4,6];
  var data4 = [9,8,7,12,9,10];
  var pie1 = [ 
    ['Black', 212],['White', 140], ['Red', 131],['Blue', 510]
  ];

  var plot1 = $.jqplot ('chart1', [bar1],{
    title: 'Example of a bar chart',
    series:[{renderer:$.jqplot.BarRenderer}],
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
        tickOptions: {
            angle: 0,
            fontSize: '12px'
        }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer
        }
    }
  });

  var plot2 = $.jqplot ('chart2', [data1,data2,data3,data4],{});

  var plot3 = $.jqplot ('chart3', [pie1],{
     seriesDefaults: {
        renderer: jQuery.jqplot.PieRenderer, 
        rendererOptions: {
            showDataLabels: true,
            dataLabels: 'value',
            fill: false,
            sliceMargin: 6, 
            lineWidth: 5
        }
    }
  });
 }

 $("#tabs").tabs({ 
collapsible: true, 
//0 is the first tab´s content
active:1, 
hide: { effect: "slideUp", duration: 'slow' },
show: { effect: "slideDown", duration: 'slow' },

create: function( event, ui ) {
return render(); 
 },
activate: function( event, ui ) {
return render(); 
 }

 });

});