1つのページで2つのハイチャートを取得するにはどうすればよいですか？

Question

私は同じページの別のdivにロードしようとしている2つのチャートを持っていますが、それらは似ていますが、1つはドリルダウンで、もう1つはそうではありません。私はvar chart = $('#review').highcharts({で関数全体をラップしようとしましたが、うまくいきません。

2つのグラフは以下の通りです：

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

あなたが1ページに2つのチャートを取得しようとしている場合、それは非常に簡単です。参考までに、私はハイチャートを毎日使っています。もっと助けが必要な場合は、私に連絡してください。 （私のメールアドレスをStackOverflowの上で私のプロフィールをチェックしてください）

HTML

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

CSS - ただ、目の上の例では、少し楽にする

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

JSFiddleは次のとおりです。http://jsfiddle.net/engemasa/7cvCX/

Answer 2

私はあなたのコードの一部がやろうとしているものは本当にわからない - 少し不必要に複雑なようで、FWIW

複数のグラフを作成する方法にAS同じページに1つのチャートを作成するのと同じように、1回以上チャートを作成するのと同じように行います。

コンテナ要素IDが異なることを確認してください。そうでなければ、1つのチャートだけを上書きします。次。ページ上の複数のチャートの

一例：

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

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