So zeigen Sie mehrere Highcharts-Graphen auf einer Seite an

Question

Hi Ich versuche, mehrere Highcharts-Graphen verschiedener Typen auf einer Seite anzuzeigen, Allerdings kann ich nur einen Graphen gleichzeitig anzeigen lassen.

Hier ist mein Code Kreisdiagramm zeigen:

$ -> 
    # 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 

und hier ist mein Code Serie Graph zur Darstellung:

$ -> 
    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() 

Zweitens die zweite Kurve js auch Graph verwendet wird, auf verschiedenen zeigen Seite für verschiedene Datenreihen. Aber es zeigt nur eine Grafik auf einmal. Ich weiß, dass die Abfrage ziemlich absolut ist, aber ich weiß nicht, wie ich das auf andere Weise erklären soll.

Jede Hilfe oder Vorschlag zur Lösung dieses Problems ist willkommen.

Vielen Dank!

EDIT Wenn Sie weitere Beschreibung oder mehr Code benötigen, wie ich dies tue, ich bereit, es zu schaffen.

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, 

}); 

Ich glaube, Sie dieses neue Objekt von Daten in Objekt und ändern Zentrum hinzufügen müssen [x, y] Wert, den Sie neues Diagramm