ハイチャート - カラムチャートのカスタマイズ

Question

ハイチャートライブラリを使用してカラムチャートを作成しています。私は私の要求に応じてカスタムの縦棒グラフにしようとしていますが、私はできない2つのことをしています。 最初に、縦棒グラフの下端と2番目の列は、すべての系列に対して境界線です。私が達成する必要がある、下のイメージを見てください。

私がこれまで行ってきたことはここにある：jsfiddle

jQuery(document).ready(function(jQuery) { 

      jQuery('#portlet-content').highcharts({ 
     credits: { 
      enabled: false 
     }, 
     exporting: { 
      enabled: false 
     }, 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Number of Applications' 
     }, 
     subtitle: { 
      text: 'BY COUNTRY' 
     }, 
     xAxis: { 
      visible: false 
     }, 
     yAxis: { 
      visible: false 
     }, 
     legend: { 
      enabled: true, 
      align: 'right', 
      verticalAlign: 'middle', 
      layout: 'vertical', 
      padding: 3, 
      itemMarginTop: 5, 
      itemMarginBottom: 5, 
      itemStyle: { 
       lineHeight: '14px' 
      }, 
      symbolHeight: 12, 
      symbolWidth: 12, 
      symbolRadius: 6 
     }, 
     tooltip: { 
      formatter: function() { 
           return '<b style="color:'+this.point.color+'">'+ this.y +'</b>'; 
          }, 
      useHTML: true, 
      borderWidth: 0, 
      style: { 
       padding: 0, 
       fontSize: '16px' 
      }, 
      shadow: false 
     }, 
     series: [ 
      { 
       name: "United Kingdom", 
       color: '#32323A', 
       data: [ 
        [294] 
       ] 
      }, { 
       name: "USA", 
       color: '#EB4825', 
       data: [ 
        [65] 
       ] 
      } 
      , { 
       name: "United Arab Emirates", 
       color: '#F7CC1E', 
       data: [ 
        [35] 
       ] 
      } 
      , { 
       name: "India", 
       color: '#24C746', 
       data: [ 
        [23] 
       ] 
      } 
      , { 
       name: "Canada", 
       color: '#2587EC', 
       data: [ 
        [18] 
       ] 
      } 
     ] 
     }); 

    }); 

Answer 1

注：私はより良い元のポスターの問題の特定の要求に対処するために私の答えを変更しました。

は、ここで私は示唆しているものです：

は、シリーズの一つは、ユーザが対話することができないと「ダミー」シリーズで積み上げ縦棒グラフを作成します。これはあなたの背景として役立ちます。これはあなたのために有用である場合は私に知らせてくださいhttp://jsfiddle.net/brightmatrix/v97p3eam/

plotOptions: { 
    column: { stacking: 'percent' } 
}, 
series: [ 
    /* this is the "dummy" series 
     set the "showInLegend" and "enableMouseTracking" attributes 
     to "false" to prevent user interaction */ 
    { name: 'dummy data', data: [5, 3, 4, 7, 2], color:'gray', 
       showInLegend: false, enableMouseTracking: false }, 
    /* here's the real data; set a unique color for each 
     set nulls for the columns where that color/data is not needed */ 
    { name: 'Series 1', color: 'red', data: [2,null,null,null,null] }, 
    { name: 'Series 2', color: 'orange', data: [null,2,null,null,null] }, 
    { name: 'Series 3', color: 'yellow', data: [null,null,2,null,null] }, 
    { name: 'Series 4', color: 'green', data: [null,null,null,2,null] }, 
    { name: 'Series 5', color: 'blue', data: [null,null,null,null,1] } 
] 

：ここ

は、私は、列のデモを重ねHighchartsに基づいて後処理迅速フィドルです！