मुझे एक पृष्ठ पर दो हाईचार्ट कैसे प्राप्त होंगे?

Question

मेरे पास दो चार्ट हैं जो मैं एक ही पृष्ठ पर अलग div पर लोड करने की कोशिश कर रहा हूं, वे समान हैं लेकिन एक ड्रिल डाउन है और दूसरा नहीं है। मैंने पूरे फ़ंक्शन को var chart = $('#review').highcharts({ से लपेटने का प्रयास किया है लेकिन यह काम नहीं करता है। , FWIW

एक छोटे से बेकार में जटिल लगता है कि कैसे अधिक चार्ट बनाने के लिए करने के लिए के रूप में -

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

आप एक पृष्ठ पर दो चार्ट प्राप्त करने के लिए कोशिश कर रहे हैं तो यह बहुत सरल है। एफवाईआई, मैं दैनिक आधार पर हाईचार्ट्स का उपयोग करता हूं। अगर आपको और मदद की ज़रूरत है, तो मुझसे संपर्क करने में संकोच न करें। (मेरा ईमेल पता के लिए stackoverflow पर अपने प्रोफाइल की जाँच करें)

एचटीएमएल

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

सीएसएस - बस उदाहरण आँखों

.chart { 
    height: 200px; 
} 

.spacer { 
    height: 20px; 
} 

पर थोड़ा आसान जावास्क्रिप्ट

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

बनाने के लिए http://jsfiddle.net/engemasa/7cvCX/

:

यहाँ एक JSFiddle है

Answer 2

मैं सच में यकीन है कि क्या अपने कोड के कुछ करने के लिए कोशिश कर रहा है नहीं कर रहा हूँ:

दो चार्ट में नीचे हैं एक ही पृष्ठ पर - आप यह कर वैसा ही जैसे एक पृष्ठ पर एक चार्ट बनाना होगा, बस इसे एक बार से अधिक :)

करते हैं और सुनिश्चित करें कि आप अलग-अलग कंटेनर तत्व आईडी दिया है - अन्यथा आप बस के साथ एक चार्ट अधिलेखित कर रहे हैं आगामी। एक पृष्ठ पर एकाधिक चार्ट के

एक उदाहरण:

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

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