하이 차트에서 두 개의 데이터 필드를 결합하십시오.

Question

내 char은 이와 유사합니다. On Air Target 2G 및 Actual 2G을 2G로 결합하고 기타 두 개의 필드 On Ait Target 3G 및 Actual 3G을 3G로 결합하려고합니다.

빗질하기 전에 이와 같이 표시합니다. enter image description here

새로운 2G 및 3G를 추가 한 후 이렇게 표시되어야합니다. enter image description here 2G tha 2G를 누르면 Ait Target 2G와 Actual 2G가 숨겨집니다. 및

$(function() { var chart = new Highcharts.Chart({ chart: { renderTo: "barchartloadmunthlydatachart", type: "column" }, title: { style: { 'fontSize': '1em' }, useHTML: true, x: -27, y: 8, text: '<span class="chart-title"> Grouped categories <span class="chart-subtitle">plugin by </span></span>' }, plotOptions: { column: { stacking: 'normal' } }, series: [ { name: "On Air Target 2G", data: [1, 3, 5, 5, 6, 7, 14, 15, 18], stack: 'target' }, { name: "Actual 2G", data: [3, 5, 10, 15, 16, 18, 18, 18, 19], stack: 'actual' }, { name: "On Air Target 3G", data: [1, 3, 5, 5, 6, 7, 14, 15, 18], stack: 'target' }, { name: "Actual 3G", data: [3, 5, 10, 15, 16, 18, 18, 18, 19], stack: 'actual' } ], xAxis: { categories: [{ name: "2016-05", categories: ["1st wk", "2nd wk", "3dr wk"] }, { name: "2016-06", categories: ["1st wk", "2nd wk", "3rd wk"] }, { name: "2016-07", categories: ["1st wk", "2nd wk", "3rd wk"] }] } }); });

Answer 1

.... 기능 위의 범례에 인쇄 기호 (고유 ID)와 함께 두 개의 가짜 시리즈를 추가하고 legendItemClick 이벤트를 잡을 수있어. 함수 내에서 G2/G3을 검사하고 특정 시리즈에 대해 series.update()를 호출하는 조건을 정의하십시오.

events: { 
     legendItemClick: function() { 
     var chart = this.chart, 
      series = chart.series, 
      visible; 

     if (this.name === '2G') { 
      visible = series[0].visible; 

      series[0].update({ 
      visible: !visible 
      }, false); 

      series[1].update({ 
      visible: !visible 
      }, true); 
      return false; 
     } 

     if (this.name === '3G') { 
      visible = series[2].visible; 
      series[2].update({ 
      visible: !visible 
      }, false); 

      series[3].update({ 
      visible: !visible 
      }, true); 
      return false; 
     } 
     } 
    } 

예 :

• http://jsfiddle.net/o8py1ahc/