2012-06-12 50 views
18

我有正常工作的情况如下:将HighCharts渲染为类而不是id?

$(document).ready(function() { 

    get_data_for_chart(); 

    function get_data_for_chart() { 
     $.ajax({ 
      url: 'get_data.aspx?rand=' + Math.random(), 
      type: 'GET', 
      dataType: 'json', 
      error: function(xhr, status, error) { 
       console.log(status); 
       console.log(xhr.responseText); 
      }, 
      success: function(results) { 
       var chart1; 

       chart1 = new Highcharts.Chart({ 
        chart: { 
         renderTo: 'portlet_content_18', 
         defaultSeriesType: 'column' 
        } 
       }); 

      } 
     }); 
    } 
}); 

凡HTML看起来是这样的:

<div id="portlet_content_18"> 

用户可以动态地选择其中portlet他/她想要在屏幕上。出于比较的原因,他/她也可以选择在屏幕上多次使用相同的portlet

因此,如果HTML最终成为:

<div id="portlet_content_18"> 
<div id="portlet_content_18"> 

只有第一div被填充与图表,而第二个保持空白。我怎样才能解决这个问题?

+1

你不能有多个ID,但你可以尝试'class'。将其更改为class =“port-18”,并确保在“成功”上更新它。 –

回答

18

是的,你可以。在这里看到的例子:http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/renderto-jquery/

基本上你分配一个jQuery的元素给一个变量:

renderTo: $('.myclass')[0]

+4

我已经尝试过,但我没有多少运气。这里是我尝试过的jsfiddle:http://jsfiddle.net/Chmts/ – oshirowanen

+0

这不适合我。 – richardaday

+5

只使用$容器不起作用。正如来自highcharts的jsfiddle所演示的那样,您必须指定$ container [0]。 –

10

由于伊已经said,你不能有多个ID,但你可以有多个类。

我必须做到以下几点:

var $containers = $('.container'), 
    chartConfig = { 
     chart: { 
      renderTo: null, 
      defaultSeriesType: 'column' 
     } 
    }; 

$containers.each(function(i, e){ 
    chartConfig.chart.renderTo = e; 
    new Highcharts.Chart(chartConfig); 
}); 

而且,你真的没有指定图表对象变量 - 至少我不想。

希望它有助于某人。

+0

非常感谢。这也适用于我。 – Strabek