如何在HIGHCHARTS上的一個系列中包含兩個數據？

Question

我使用堆疊highcharts和組列作如下圖：

IMAGE

我一直無法得到它的工作，我有以下代碼：

$(function() { 
    var chart; 
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'column' 
      }, 
      title: { 
       text: 'Types of answer' 
      }, 
      subtitle: { 
       text: 'SORT BY: Ages' 
      }, 
      xAxis: { 
       categories: ['First Test','Second Test','Third Test'] 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Numero de pacientes' 
       }, 
       stackLabels: { 
        enabled: true, 
        style: { 
         fontWeight: 'bold', 
         color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
        } 
       } 
      }, 
      legend: { 
       layout: 'vertical', 
       align: 'right', 
       verticalAlign: 'top', 
       x: -150, 
       y: -13, 
       floating: true, 
       backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white', 
       borderColor: '#CCC', 
       borderWidth: 1, 
       shadow: false 
      }, 
      tooltip: { 
       formatter: function() { 
        return '<b>'+ this.x +'</b><br/>'+ 
         this.series.name +': '+ this.y +'<br/>'+ 
         'Total: '+ this.point.stackTotal; 
       } 
      }, 
      plotOptions: { 
       column: { 
        stacking: 'normal', 
        dataLabels: { 
         enabled: true, 
         color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' 
        } 
       } 
      }, 
      series: [{ 
       name: 'Answer 1', 
       data: [variable1, variable7, variable13], 
       stack: 'Less than 18', 
       data: [variable19, variable25, variable31], 
       stack: 'More than 18' 
      },{ 
       name: 'Answer 2', 
       data: [variable2, variable8, variable14], 
       stack: 'Less than 18', 
       data: [variable20, variable26, variable32], 
       stack: 'More than 18' 
      },{ 
       name: 'Answer 3', 
       data: [variable3, variable9, variable15], 
       stack: 'Less than 18', 
       data: [variable21, variable27, variable33], 
       stack: 'More than 18' 
      }] 
     }); 
    }); 

}); 

我不想使用另一個系列，因爲我不希望它們出現在圖例中，我只希望傳說僅列出

Answer 1

您需要分隔系列中的堆疊組。優系列應該類似於此：

series: [ { 
      name: 'Answer 1', 
      data: [variable1, variable7, variable13], 
      stack: 'Less than 18' 
     }, 
     { 
      name: 'Answer 1', 
      data: [variable19, variable25, variable31], 
      stack: 'More than 18' 
     }, 
     { 
      name: 'Answer 2', 
      data: [variable2, variable8, variable14], 
      stack: 'Less than 18' 
     }, 
     { 
      name: 'Answer 2', 
      data: [variable20, variable26, variable32], 
      stack: 'More than 18' 
     }, 
     { 
      name: 'Answer 3', 
      data: [variable3, variable9, variable15], 
      stack: 'Less than 18' 
     }, 
     { 
      name: 'Answer 3', 
      data: [variable21, variable27, variable33], 
      stack: 'More than 18' 
     } 
     ] 

Answer 2

在這裏你可以找到例子，如何使用legendItemClick連接兩個串聯成一個圖例項目：http://jsfiddle.net/5m9JW/326/

Answer 3

您可以將多個系列連接成隱藏一個圖例項目和展現的內容以及不使用該系列中的linkedTo屬性 -

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/arearange-line/

series: [{ 
    name: 'Temperature', 
    data: averages, 
    zIndex: 1, 
    marker: { 
     fillColor: 'white', 
     lineWidth: 2, 
     lineColor: Highcharts.getOptions().colors[0] 
    } 
}, { 
    name: 'Range', 
    data: ranges, 
    type: 'arearange', 
    lineWidth: 0, 
    linkedTo: ':previous', 
    color: Highcharts.getOptions().colors[0], 
    fillOpacity: 0.3, 
    zIndex: 0 
}]