come ottengo due highchart su una pagina?

Question

Ho due grafici che sto cercando di caricare su div separati sulla stessa pagina, sono simili ma uno è un drill down e l'altro no. Ho provato a completare l'intera funzione con var chart = $('#review').highcharts({ ma non funziona.

I due grafici sono al di sotto:

$(function() { 
      var colors = Highcharts.getOptions().colors, 
      categories = ['Metric 1', 'Metric 2', 'Metric 3','metric 4'], 
      name = 'Votes', 
      data = [{ 
        y: 1, 
        color: colors[0], 
       }, { 
        y: 2, 
        color: colors[1], 

       }, { 
        y: 3, 
        color: colors[2], 

       },{ 
        y: 5, 
        color: colors[3], 

       }]; 

     function setChart(name, categories, data, color) { 
      chart.xAxis[0].setCategories(categories, false); 
      chart.series[0].remove(false); 
      chart.addSeries({ 
       name: name, 
       data: data, 
       color: color || 'white' 
      }, false); 
      chart.redraw(); 
     } 

     var chart = $('#review').highcharts({ 
      chart: { 
       type: 'column' 
      }, 
      title: { 
       text: 'Review breakdown' 
      }, 
      xAxis: { 
       categories: categories 
      }, 


      tooltip: { 
       formatter: function() { 
        var point = this.point, 
         s = this.x +'<br><b>'+ this.y +' stars</b><br/>'; 
          return s; 
       } 
      }, 
      series: [{ 
       name: name, 
       data: data, 
       color: 'white' 
      }], 
      exporting: { 
       enabled: false 
      }, 
        legend: { 
      enabled: false 
     }, 

     credits: { 
      enabled: false 
     }, yAxis: {min: 0, max: 5, 
        title: {text: 'Star Rating'} 
        } 
     }) 
     .highcharts(); // return chart 
    }); 


$(function() { 
      var colors = Highcharts.getOptions().colors, 
      categories = ['positive', 'negative', 'sum'], 
      name = 'Votes', 
      data = [{ 
        y: 55.11, 
        color: colors[0], 
        drilldown: { 
         name: 'Positive votes', 
         categories: ['Users', 'Admin', 'Anonymous'], 
         data: [10.85, 7.35, 33.06], 
         color: colors[0] 
        } 
       }, { 
        y: -7.15, 
        color: colors[3], 
        drilldown: { 
         name: 'Negative votes', 
         categories: ['Users', 'Admin', 'Anonymous'], 
         data: [-4.55, -1.42, -0.23], 
         color: colors[3] 
        } 
       }, { 
        y: 2.14, 
        color: colors[4], 
        drilldown: { 
         name: 'Total votes', 
         categories: ['Users', 'Admin', 'Anonymous'], 
         data: [ 0.12, 0.37, 1.65], 
         color: colors[4] 
        } 
       }]; 

     function setChart(name, categories, data, color) { 
      chart.xAxis[0].setCategories(categories, false); 
      chart.series[0].remove(false); 
      chart.addSeries({ 
       name: name, 
       data: data, 
       color: color || 'white' 
      }, false); 
      chart.redraw(); 
     } 

     var chart = $('#votes').highcharts({ 
      chart: { 
       type: 'column' 
      }, 
      title: { 
       text: 'Vote breakdown' 
      }, 
      subtitle: { 
       text: 'Click the columns to view breakdown.' 
      }, 
      xAxis: { 
       categories: categories 
      }, 
      yAxis: { 
       title: { 
        text: 'Total votes' 
       } 
      }, 
      plotOptions: { 
       column: { 
        cursor: 'pointer', 
        point: { 
         events: { 
          click: function() { 
           var drilldown = this.drilldown; 
           if (drilldown) { // drill down 
            setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color); 
           } else { // restore 
            setChart(name, categories, data); 
           } 
          } 
         } 
        }, 
        dataLabels: { 
         enabled: true, 
         color: colors[0], 
         style: { 
          fontWeight: 'bold' 
         } 
        } 
       } 
      }, 
      tooltip: { 
       formatter: function() { 
        var point = this.point, 
         s = this.x +':<b>'+ this.y +' votes</b><br/>'; 
        if (point.drilldown) { 
         s += 'Click to view '+ point.category +' breakdown'; 
        } else { 
         s += 'Click to return'; 
        } 
        return s; 
       } 
      }, 
      series: [{ 
       name: name, 
       data: data, 
       color: 'white' 
      }], 
      exporting: { 
       enabled: false 
      }, 
        legend: { 
      enabled: false 
     }, 

     credits: { 
      enabled: false 
     }, 
     }) 
     .highcharts(); // return chart 
    }); 

Answer 1

Se si sta cercando di ottenere due grafici in una sola pagina, allora è molto semplice. Per la cronaca, io uso highcharts su base giornaliera. Se hai bisogno di più aiuto, sentiti libero di contattarmi. (Guarda il mio profilo su StackOverflow per il mio indirizzo e-mail)

HTML

<div id="chart-A" class="chart"></div> 
<div class="spacer"></div> 
<div id="chart-B" class="chart"></div> 

CSS - Solo per fare l'esempio un po 'più facile per gli occhi

.chart { 
    height: 200px; 
} 

.spacer { 
    height: 20px; 
} 

JavaScript

$(function() { 

    // If you need to specify any global settings such as colors or other settings you can do that here 

    // Build Chart A 
    $('#chart-A').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Chart A' 
     }, 
     xAxis: { 
      categories: ['Jane', 'John', 'Joe', 'Jack', 'jim'] 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Apple Consumption' 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     credits: { 
      enabled: false 
     }, 
     tooltip: { 
      shared: true 
     }, 
     series: [{ 
      name: 'Apples', 
      data: [5, 3, 8, 2, 4]    
     }] 
    }); 

    // Build Chart B 
    $('#chart-B').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Chart B' 
     }, 
     xAxis: { 
      categories: ['Jane', 'John', 'Joe', 'Jack', 'jim'] 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Miles during Run' 
      } 
     }, 
     legend: { 
      enabled: false 
     }, 
     credits: { 
      enabled: false 
     }, 
     tooltip: { 
      shared: true 
     }, 
     series: [{ 
      name: 'Miles', 
      data: [2.4, 3.8, 6.1, 5.3, 4.1] 
     }] 
    }); 
}); 

Ecco un JSFiddle: http://jsfiddle.net/engemasa/7cvCX/

Answer 2

io non sono davvero sicuro di quello che alcuni del codice sta cercando di fare - sembra un po 'inutilmente complicato, FWIW

su come rendere più grafici nella stessa pagina - lo fai come se fossi un grafico su una pagina, fallo più di una volta :)

e assicurati di avere id di contenitore diversi, altrimenti stai solo sovrascrivendo un grafico con Il prossimo.

Un esempio di più grafici su una pagina:

http://jsfiddle.net/kwtZr/1/

there's no relevant code to put here, just click the link