Tôi làm cách nào để nhận được hai highcharts trên một trang?

Question

Tôi có hai biểu đồ mà tôi đang cố gắng tải trên div riêng biệt trên cùng một trang, chúng giống nhau nhưng một là một mũi khoan xuống và biểu đồ kia thì không. Tôi đã thử gói toàn bộ chức năng với var chart = $('#review').highcharts({ nhưng nó không hoạt động.

Hai bảng xếp hạng dưới:

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

Nếu bạn đang cố gắng để có được hai biểu đồ trên một trang thì nó rất đơn giản. FYI, tôi sử dụng highcharts trên cơ sở hàng ngày. Nếu bạn cần thêm trợ giúp, hãy liên hệ với tôi. (Kiểm tra hồ sơ cá nhân của tôi trên stackoverflow cho địa chỉ email của tôi)

HTML

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

CSS - Chỉ cần để làm ví dụ một chút dễ dàng hơn trên mắt

.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] 
     }] 
    }); 
}); 

Đây là một JSFiddle: http://jsfiddle.net/engemasa/7cvCX/

Answer 2

Tôi không thực sự chắc chắn những gì một số mã của bạn đang cố gắng để làm - có vẻ hơi không cần thiết phức tạp, FWIW

AS để làm thế nào để làm cho nhiều bảng xếp hạng trên cùng một trang - bạn làm điều đó giống như bạn sẽ tạo một biểu đồ trên một trang, chỉ cần thực hiện nhiều lần một lần :)

và đảm bảo bạn có id phần tử vùng chứa khác nhau - nếu không bạn chỉ ghi đè một biểu đồ kế tiếp.

Một ví dụ của nhiều bảng xếp hạng trên một trang:

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

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