列の高さを積み重ねた高さの列ハイチャート

Question

この例では、積み上げ縦棒グラフを使用しています。 http://jsfiddle.net/sqgq88rd/5/。私は凡例をクリックすると、列が常に100％になるので、積み重ねを使用しています。「積み重ね」して、「合計」列が常に100％になり、列「part1」と列「part2」がそのパーセントを使用するようにします。私はyAxisの最大値を100に固定しましたが、列の高さは等しくありませんでした。私はこのコードを試してみる。

$(function() { 
$('#container').highcharts({ 
    chart: { 
     type: 'column',options3d: { 
      enabled: true, 
      alpha: 5, 
      depth: 100 
     }, 
    }, 
    title: { 
      useHTML: true, 
     text: 'Stacked column chart', 
     x:-20 
    }, 
    subtitle: { 
     useHTML: true, 
     text: '', 
     x: -20 
    }, 
    xAxis: { 
     categories : [ 'CPC','QBPC','QTPC','TTHPC','DNPC','QNAPC','QNPC','BDPC','PYPC','KHPC','GLPC','KTPC','DLPC','DNoPC','CGC','NPMU ','CREB ','PEC ','IT','EMEC ','ETC ','PC3I','CC' ] 
    }, 
    yAxis: { 
     min: 0, 
     max: 100, 
     title: { 
      text: '' 
     }, 
     stackLabels: { 
      enabled: false, 
      style: { 
       fontWeight: 'bold', 
       color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
      } 
     } 
    }, 
    tooltip : { 
     headerFormat: '<b>{point.x}<b><br/>', 
     pointFormat: '{series.name}: <b>{point.tyle}</b><br/>Tỷ lệ: <b>({point.y:.0f}%)<b/>' 

     }, 
    plotOptions: { 
     column: { 
     stacking: 'stacked' 
     }, 
     series: { 
     dataLabels: { 
      enabled: true, 
      inside: true, 
      allowOverlap: true, 
      color: '#1C689D', 
      style: { 
      fontWeight: 'bold' 
      }, 
      formatter: function() { 
      return this.point.tyle 
      } 
     } 
     } 

    }, 
    series: [ 
    { 
      name: 'Total', 
      data: [{y:100,tyle:3080},{y:100,tyle:527},{y:100,tyle:743},{y:100,tyle:662},{y:100,tyle:1860},{y:100,tyle:1160},{y:100,tyle:946},{y:100,tyle:944},{y:100,tyle:650},{y:100,tyle:1095},{y:100,tyle:650},{y:100,tyle:474},{y:100,tyle:890},{y:100,tyle:1149},{y:100,tyle:1755},{y:100,tyle:640},{y:100,tyle:689},{y:100,tyle:345},{y:100,tyle:176},{y:100,tyle:133},{y:100,tyle:467},{y:100,tyle:266},{y:100,tyle:108}], 
      index:1 
     },{ 
      name: 'Part 1', 
      data: [{y:6,tyle:179},{y:3,tyle:17},{y:6,tyle:42},{y:1,tyle:9},{y:1,tyle:12},{y:3,tyle:40},{y:1,tyle:13},{y:2,tyle:17},{y:2,tyle:10},{y:4,tyle:46},{y:7,tyle:45},{y:3,tyle:12},{y:5,tyle:47},{y:4,tyle:41},{y:2,tyle:29},{y:3,tyle:16},{y:0,tyle:3},{y:10,tyle:33},{y:5,tyle:8},{y:3,tyle:4},{y:11,tyle:52},{y:0,tyle:0},{y:0,tyle:0}], 
      index:2 
     }, 
     { 
      name: 'Part 2', 
      data: [{y:2,tyle:50},{y:1,tyle:7},{y:2,tyle:18},{y:0,tyle:3},{y:0,tyle:2},{y:1,tyle:14},{y:0,tyle:2},{y:0,tyle:2},{y:1,tyle:5},{y:2,tyle:25},{y:4,tyle:23},{y:0,tyle:1},{y:3,tyle:23},{y:2,tyle:23},{y:1,tyle:15},{y:2,tyle:12},{y:0,tyle:0},{y:4,tyle:15},{y:1,tyle:1},{y:0,tyle:0},{y:9,tyle:26},{y:0,tyle:0},{y:0,tyle:0}], 
      index:2 
     } 
    ] 
}); 

}）;

列の高さを等しく100に固定する方法を教えてください。 http://api.highcharts.com/highcharts/plotOptions.column.stacking

例コード： http://jsfiddle.net/6my8pghf/

よろしく

Answer 1

あなたはstacking: 'percent'

APIリファレンスを使用することができます。

Answer 2

今は合計を100に設定し、次に他の2つの系列を値として設定し、それらをすべて一緒に積み重ねます。

だから、あなたの最初のポイント、あなた100、プラス6、プラス2、すべての異なる高さにそれらを作る各点のように108 との合計、のために。

「合計」シリーズから「パート1」と「パート2」の値を差し引く必要があります。

例：

$.each(totalData, function(i, point) { 
    totalData[i].y = (totalData[i].y - part1Data[i].y - part2Data[i].y); 
}) 

更新フィドル：

• http://jsfiddle.net/sqgq88rd/7/

出力：