1つのページに複数のハイチャートグラフを表示する方法

Question

こんにちは私は1つのページに異なるタイプの複数のハイチャートグラフを表示しようとしています しかし、一度に1つのグラフしか表示できません。ここで

は、円グラフを表示するために私のコードです：

$ -> 
    # Note: scheme_distribution is like [['Gold': 50],['Equity': 5],['Debt': 45]] 
    scheme_distribution = $("#scheme_distribution_chart").data('distribution') 
    ### 
    # Create the chart when all data is loaded 
    # @returns {undefined} 
    ### 

    $ -> 
    chart = new (Highcharts.Chart)({ 
     chart: 
     renderTo: 'scheme_distribution_chart' 
     type: 'pie' 
     plotOptions: 
     pie: 
      innerSize: '60%' 
      dataLabels: 
      enabled: false 
      tooltip: 
      headerFormat: '<span style="color:{point.color}">\u25CF</span><small> {point.key}</small>: ', 
      pointFormat:'<b>{point.y}%</b><br/>' 
     series: [ { data: scheme_distribution } ] 
     title: 
     text: 'Portfolio' 
    }, (chart) -> 
     # on complete 
     textX = chart.plotLeft + chart.series[0].center[0] 
     textY = chart.plotTop + chart.series[0].center[1] 
     span = '<span id="pieChartInfoText" style="position:relative; text-align:center;">' 
     span += '<span style="font-size: 14px">' + scheme_distribution[0][0] + ' ' + scheme_distribution[0][1] + '%</span><br>' 
     span += '<span style="font-size: 14px">' + scheme_distribution[1][0] + ' ' + scheme_distribution[1][1] + '%</span><br>' 
     span += '<span style="font-size: 14px">' + scheme_distribution[2][0] + ' ' + scheme_distribution[2][1] + '%</span><br>' 
     span += '</span>' 
     $('#addText').append span 
     span = $('#pieChartInfoText') 
     span.css 'left', textX + span.width() * -0.4 
     span.css 'top', textY + span.height() * -0.5 
     return 
    ) 
    return 

、ここでは、系列グラフを示すために私のコードです：第二に2番目のグラフのjsが異なる上でグラフを表示するためにも使用されている

$ -> 
    seriesOptions = [] 
    seriesCounter = 0 
    names = [ 
    'good' 
    'bad' 
    'average' 
    ] 
    current_time = new Date(); 
    # set data 
    scenario = $("#portfolio_chart").data('scenario') 
    ### 
    # Create the chart when all data is loaded 
    # @returns {undefined} 
    ### 

    createChart = -> 
    $('#portfolio_chart').highcharts 'StockChart', 
     legend: 
     enabled: true 
     layout: 'horizontal', 
     align: 'center', 
     verticalAlign: 'top', 
     y:25 
     rangeSelector: selected: 5 
     yAxis: 
     labels: formatter: -> 
      (if @value > 0 then ' + ' else '') + @value + '%' 
     plotLines: [ { 
      value: 0 
      width: 2 
      color: 'silver' 
     } ] 
     plotOptions: 
     series: 
      compare: 'value' 
      turboThreshold: 0 
     tooltip: 
     pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>' 
     valueDecimals: 2 
     formatter: -> 
      if this.x > current_time 
      good = this.points[0] 
      average = this.points[2] 
      bad = this.points[1] 
      date = '<b><span style="color: black"><b>Date:</b> ' + new Date(good.x) + '</span></b><br>' 
      good_tooltip = '<span style="color:' + good.color + '">' + good.series.name + '</span> : <b>' + good.y + '</b> <br>' 
      average_tooltip = '<span style="color:' + average.color + '">' + average.series.name + '</span> : <b>' + average.y + '</b> <br>' 
      bad_tooltip = '<span style="color:' + bad.color + '">' + bad.series.name + '</span> : <b>' + bad.y + '</b> <br>' 
      return date + good_tooltip + average_tooltip + bad_tooltip; 
      else 
      average = this.points[2] 
      date = '<span style="color: black"><b>Date:</b> ' + new Date(average.x) + '</span></b><br>' 
      average_tooltip = '<span style="color:' + average.color + '">' + average.series.name + '</span> : <b>' + average.y + '</b> <br>' 
      return date + average_tooltip; 
     series: seriesOptions 
    return 

    $.each names, (i, name) -> 
    seriesOptions[i] = 
     name: name 
     data: scenario[name] 
     type: 'spline' 
    # As we're loading the data asynchronously, we don't know what order it will arrive. So 
    # we keep a counter and create the chart when all the data is loaded. 
    seriesCounter += 1 
    if seriesCounter == names.length 
     createChart() 

異なるデータ系列のページ。 しかし、一度に1つのグラフしか表示されません。 私は質問が絶対的であることは知っていますが、これを他の方法で説明する方法はわかりません。

この問題の解決方法に関するご意見やご要望はありますか？

ありがとうございました！

EDIT 私がこれをやっている方法についての詳しい説明やコードが必要な場合は、私はそれを提供する用意があります。

Answer 1

Fiddle Link

<div id="container" style="height: 600px;"></div> 


    var object=[{ 
      name: "2011", 
      data: [ 
       { 
        name: "Apple", 
        color: "#FF3333", 
        y: 8 
       }, 
       { 
        name: "Banana", 
        color: "#FFF55C", 
        y: 11 
       }, 
       { 
        name: "Pear", 
        color: "#F1FFB8", 
        y: 3 
       } 
      ], 
      center: [150,100], 
      size: 150 
     }, 
     { 
      name: "2011", 
      data: [ 
       { 
        name: "Apple", 
        color: "#FF3333", 
        y: 8 
       }, 
       { 
        name: "Banana", 
        color: "#FFF55C", 
        y: 11 
       }, 
       { 
        name: "Pear", 
        color: "#F1FFB8", 
        y: 3 
       } 
      ], 
      center: [450,100], 
      size: 150 
     }, 
     { 
      name: "2013", 
      data: [ 
       { 
        name: "Apple", 
        color: "#FF3333", 
        y: 8 
       }, 
       { 
        name: "Banana", 
        color: "#FFF55C", 
        y: 11 
       }, 
       { 
        name: "Pear", 
        color: "#F1FFB8", 
        y: 3 
       } 
      ], 
      center: [150,300], 
      size: 150 
     }, 
     { 
      name: "2014", 
      data: [ 
       { 
        name: "Apple", 
        color: "#FF3333", 
        y: 8 
       }, 
       { 
        name: "Banana", 
        color: "#FFF55C", 
        y: 11 
       }, 
       { 
        name: "Pear", 
        color: "#F1FFB8", 
        y: 3 
       } 
      ], 
      center: [450,300], 
      size: 150 
     }]; 


chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     type: 'pie' 
    }, 
    title: { 
     text: "Pie Charts", 
     align: 'center' 
    }, 
    legend: { 
     layout: 'vertical', 
     align: 'right', 
     verticalAlign: 'top' 
    }, 
    tooltip: { 
     formatter: function() { 
      return this.key + ': ' + this.y + ' (' + Math.round(this.percentage) + '%)'; 
     } 
    }, 

    series:object, 

}); 

私はあなたが新しいグラフ