하이 차트 : 드릴 다운이있는 콤보 이중 축

Question

드릴 다운이있는 콤보 DUal 축을 사용하려고하는데 막대를 클릭하면 작동하지 않습니다.

또 다른 질문은 두 번째 데이터 (스플라인)도 드릴 다운을 사용해야한다는 것입니까? 또는 firts 데이터 (열)에만 사용할 수 있습니다. http://jsfiddle.net/QDzpj/

및 코드 원인 내가 그것을하지 않고 링크를 떠날 수 없다 :

이

내 jsfiddle입니다.

$(function() { 
    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 colors = Highcharts.getOptions().colors; 
    var categories = ['MSIE', 'Firefox', 'Chrome'], 
      name = 'Browser brands', 
      data = [ 
        { 
         y:49.9, 
         drilldown: { 
          name: 'MSIE versions', 
          categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'], 
          data: [10.85, 7.35, 33.06, 2.81], 
          color: colors[0] 
         } 
        }, 
        { 
         y:71.5, 
         drilldown: { 
          name: 'Firefox versions', 
          categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'], 
          data: [0.20, 0.83, 1.58, 13.12, 5.43], 
          color: colors[1] 
         } 
        }, { 
         y:106.4, 
         drilldown: { 
          name: 'Chrome versions', 
          categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0', 
           'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'], 
          data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22], 
          color: colors[2] 
         } 
        }]; 

     $('#container').highcharts({ 
      chart: { 
       zoomType: 'xy' 
      }, 
      title: { 
       text: 'Average Monthly Temperature and Rainfall in Tokyo' 
      }, 
      subtitle: { 
       text: 'Source: WorldClimate.com' 
      }, 
      xAxis: [{ 
       categories: ['Jan', 'Feb', 'Mar'] 
      }], 
      yAxis: [{ // Primary yAxis 
       labels: { 
        format: '{value}°C', 
        style: { 
         color: '#89A54E' 
        } 
       }, 
       title: { 
        text: 'Temperature', 
        style: { 
         color: '#89A54E' 
        } 
       } 
      }, { // Secondary yAxis 
       title: { 
        text: 'Rainfall', 
        style: { 
         color: '#4572A7' 
        } 
       }, 
       labels: { 
        format: '{value} mm', 
        style: { 
         color: '#4572A7' 
        } 
       }, 
       opposite: true 
      }], 
      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' 
         }, 
         formatter: function() { 
          return this.y +'%'; 
         } 
        } 
       } 
      }, 
      tooltip: { 
       shared: true 
      }, 
      legend: { 
       layout: 'vertical', 
       align: 'left', 
       x: 120, 
       verticalAlign: 'top', 
       y: 100, 
       floating: true, 
       backgroundColor: '#FFFFFF' 
      }, 
      series: [{ 
       name: 'Rainfall', 
       //color: '#4572A7', 
       type: 'column', 
       yAxis: 1, 
       data: data, 
       tooltip: { 
        valueSuffix: ' mm' 
       } 
      }, { 
       name: 'Temperature', 
       color: '#89A54E', 
       type: 'spline', 
       data: [7.0,6.9, 9.5], 
       tooltip: { 
        valueSuffix: '°C' 
       } 
      }] 
     }); 
    }); 

Answer 1

콘솔에 잘못된 것을 말하고 있습니다.

var chart = $("#container").highcharts(); 

예 : 참조 :

"Uncaught ReferenceError: chart is not defined " 

그래서 당신이 필요로하는 모든이 차트를 정의하기 위해, 예를 들면 이런 식이다 http://jsfiddle.net/QDzpj/1/