HighChartでスタックされた列のシリーズ間にスペースを追加するには？

Question

Angular2プロジェクトでHighChartを使用しています。チャートにはいくつかのシリーズがあります。そして、それは今、それは次のようになります。

コードは次のとおりです。問題に関する

this.options = { 
     chart: { 
     type: 'column' 
     }, 
     credits: { 
     enabled: false 
     }, 
     title: { 
     text: null 
     }, 
     legend: { 
     enabled: false 
     }, 
     tooltip: { 
     enabled: false 
     }, 
     xAxis: { 
     categories: [ "2016-12-01", "2016-12-02", "2016-12-03", "2016-12-04", "2016-12-05", "2016-12-06", 
     "2016-12-07", "2016-12-08", "2016-12-09", "2016-12-10", "2016-12-11", "2016-12-12", "2016-12-13", 
     "2016-12-14", "2016-12-15", "2016-12-16", "2016-12-17", "2016-12-18", "2016-12-19", "2016-12-20", 
     "2016-12-21", "2016-12-22", "2016-12-23", "2016-12-24", "2016-12-25", "2016-12-26", "2016-12-27", 
     "2016-12-28", "2016-12-29", "2016-12-30", "2016-12-31" ], 
     tickLength: 40 
     }, 
     yAxis: { 
     tickPositions: [0, 4, 8, 10], 
     title: { 
      text: '' 
     } 
     }, 
     plotOptions: { 
     column: { 
      stacking: 'normal', 
     }, 
     series: { 
      allowPointSelect: true, 
      states: { 
      select: { 
       color: null, 
       borderWidth: 1, 
       borderColor: 'Blue' 
      } 
      }, 
      pointWidth: 30, 
      dataLabels: { 
      useHTML: true, 
      enabled: true, 
      color: 'black', 
      verticalAlign: 'top', 
      formatter: function() { 
       if(moment().isBefore(this.point.category.date)) { 
       return; 
       } else { 
       if (this.point.category.status === 'now') { 
        this.point.borderColor = 'blue'; 
       } 
       if (this.y !== 0) { 
        return this.y; 
       } 
       } 
      } 
      }, 
      cursor: 'pointer', 
     } 
     }, 
     series: [ 
     { 
      name: 'Diff', 
      color: 'rgba(255, 255, 255, 0.8)', 
      borderColor: 'rgb(194, 194, 194)', 
      borderWidth: 1, 
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 8, 8, 0, 0, 8, 8, 8, 7, 8, 0, 0, 8], 
     }, 
     { 
      name: 'Weekend', 
      color: 'rgba(194, 194, 194, 0.4)', 
      borderColor: 'rgb(194, 194, 194)', 
      borderWidth: 1, 
      data: [8, 8, 0, 0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 8, 8, 0], 
     }, 
     { 
      name: 'Overtimes', 
      color: 'rgba(243, 183, 74, 0.8)', 
      borderColor: 'rgb(194, 194, 194)', 
      borderWidth: 1, 
      data: [0, 0, 0, 0, 0, 2, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
     }, 
     { 
      name: 'Loged hours', 
      color: 'rgba(26, 179, 148, 0.8)', 
      borderColor: 'rgb(26, 179, 148)', 
      borderWidth: 1, 
      data: [0, 0, 5, "7.25", 8, 7, 7, 0, 0, 0, 3, 8, 8, 8, 0, 0, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 

     }, 
     { 
      name: 'NPA', 
      color: 'rgba(28, 132, 198, 0.8)', 
      borderColor: 'rgb(28, 132, 198)', 
      borderWidth: 1, 
      data: [0, 0, 3, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 
     }, 
     { 
      name: 'No report', 
      color: 'rgba(255, 255, 255, 0.8)', 
      borderColor: 'rgb(237, 85, 101)', 
      borderWidth: 1, 
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] 
     }, 
     { 
      name: 'Report not send', 
      color: 'rgba(237, 85, 101, 0.8)', 
      borderColor: 'rgb(237, 85, 101)', 
      borderWidth: 1, 
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
     } 
     ] 
    }; 

そして今。あなたが見ているように、私はオレンジシリーズを「オーバータイム」と呼んでいます。そのような方法で表示する必要があります。「ログされた時間」シリーズが8未満の場合、「オーバータイム」は以下のように8行より上に表示されます。

どうすれば実装できますか？私は解決策を持っているhttp://jsfiddle.net/fhtz8w1h/

Answer 1

：

これは、この例のフィドルです。データオブジェクトに応じて、新しい補助配列を追加します。

import { Component, OnInit, EventEmitter } from '@angular/core'; 

@Component({ 
    selector: 'app-comb', 
    templateUrl: './comb.component.html', 
    styleUrls: ['./comb.component.scss'] 
}) 
export class CombComponent implements OnInit { 
    @Output() onClickColumn = new EventEmitter(); 
    options; 

    data = { 
    reported: [0, 0, 3, 7, 8, 7, 7, 0, 0, 0, 3, 8, 8, 6, 0, 0, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
    npl:   [0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
    overtimes: [0, 0, 1, 3, 0, 1, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
    required: [0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
    weekends: [8, 8, 0, 0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 8, 8, 0], 
    expected: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 8, 8, 0, 0, 8, 8, 8, 7, 8, 0, 0, 8], 
    future_plan: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], 
    } 
    auxData: Array<number> = []; 

    constructor() {} 

    ngOnInit() { 
    this.createAuxData(); 
    this.options = { 
     chart: { 
     type: 'column' 
     }, 
     credits: { 
     enabled: false 
     }, 
     title: { 
     text: null 
     }, 
     legend: { 
     enabled: false 
     }, 
     tooltip: { 
     enabled: false 
     }, 
     xAxis: { 
     categories: [ "2016-12-01", "2016-12-02", "2016-12-03", "2016-12-04", "2016-12-05", "2016-12-06", "2016-12-07", "2016-12-08", "2016-12-09", "2016-12-10", "2016-12-11", "2016-12-12", "2016-12-13", "2016-12-14", "2016-12-15", "2016-12-16", "2016-12-17", "2016-12-18", "2016-12-19", "2016-12-20", "2016-12-21", "2016-12-22", "2016-12-23", "2016-12-24", "2016-12-25", "2016-12-26", "2016-12-27", "2016-12-28", "2016-12-29", "2016-12-30", "2016-12-31" ], 
     labels: { 
      formatter: function() { 
      if (this.value.status === 'weekend') { 
       return ` 
       <span>${moment(this.value.date).format('DD')}</span> 
       <br> 
       <span>${moment(this.value.date).format('dd')}</span>`; 
      } else if (this.value.status === 'now') { 
       return ` 
       <span style="color: blue">${moment(this.value.date).format('DD')}</span> 
       <br> 
       <span style="color: blue">${moment(this.value.date).format('dd')}</span>`; 
      } else { 
       return ` 
       <span style="color: black">${moment(this.value.date).format('DD')}</span> 
       <br> 
       <span style="color: black">${moment(this.value.date).format('dd')}</span>`; 
      } 
      } 
     }, 
     tickLength: 40 
     }, 
     yAxis: { 
     tickPositions: [0, 4, 8, 10], 
     endOnTick: false, 
     ceiling: 24, 
     title: { 
      text: null 
     } 
     }, 
     plotOptions: { 
     column: { 
      stacking: 'normal', 
     }, 
     series: { 
      allowPointSelect: true, 
      states: { 
      select: { 
       color: null, 
       borderWidth: 1, 
       borderColor: 'Blue' 
      } 
      }, 
      pointWidth: 30, 
      dataLabels: { 
      useHTML: true, 
      enabled: true, 
      color: 'black', 
      style: { 
       fontSize: '9px' 
      }, 
      verticalAlign: 'top', 
      formatter: function() { 
       if (moment().isBefore(this.point.category.date)) { 
       return; 
       } else { 
       if (this.point.category.status === 'now') { 
        this.point.borderColor = 'blue'; 
       } 
       if (this.y !== 0) { 
        return this.y; 
       } 
       } 
      } 
      }, 
      cursor: 'pointer', 
     } 
     }, 
     series: [ 
     { 
      name: 'Diff', 
      color: 'rgba(255, 255, 255, 0.8)', 
      borderColor: 'rgb(194, 194, 194)', 
      borderWidth: 1, 
      dataLabels: false, 
      data: this.data.expected 

     }, 
     { 
      name: 'Weekend', 
      color: 'rgba(194, 194, 194, 0.4)', 
      borderColor: 'rgb(194, 194, 194)', 
      borderWidth: 1, 
      dataLabels: false, 
      data: this.data.weekends 

     }, 
     { 
      name: 'Overtimes', 
      color: 'rgba(243, 183, 74, 0.8)', 
      borderColor: 'rgb(194, 194, 194)', 
      borderWidth: 1, 
      data: this.data.overtimes 

     }, 
     { 
      name: 'auxData', 
      color: 'rgb(255, 255, 255)', 
      borderColor: 'rgb(194, 194, 194)', 
      borderWidth: 1, 
      dataLabels: false, 
      data: this.auxData 

     }, 
     { 
      name: 'Loged hours', 
      color: 'rgba(26, 179, 148, 0.8)', 
      borderColor: 'rgb(26, 179, 148)', 
      borderWidth: 1, 
      data: this.data.reported 

     }, 
     { 
      name: 'NPA', 
      color: 'rgba(28, 132, 198, 0.8)', 
      borderColor: 'rgb(28, 132, 198)', 
      borderWidth: 1, 
      data: this.data.npl 

     }, 
     { 
      name: 'No report', 
      color: 'rgba(255, 255, 255, 0.8)', 
      borderColor: 'rgb(237, 85, 101)', 
      borderWidth: 1, 
      data: this.data.required 

     }, 
     { 
      name: 'Report not send', 
      color: 'rgba(237, 85, 101, 0.8)', 
      borderColor: 'rgb(237, 85, 101)', 
      borderWidth: 1, 
      data: this.data.future_plan 

     } 
     ] 
    }; 
    } 

    createAuxData() { 
     for (var i = 0; i < this.data.reported.length; i++) { 
     if (this.data.reported[i] !== 0 && (this.data.reported[i] + this.data.npl[i]) < 8) { 
     var diff = 8 - this.data.reported[i] - this.data.npl[i]; 
     this.auxData.push(8 - this.data.reported[i] - this.data.npl[i]); 
     } else { 
     this.auxData.push(0); 
     } 
    } 
    } 


    onClick(e) { 
    if (!e.point) { 
     return false; 
    } else { 
     this.onClickColumn.emit(e.point.category.date); 
    } 
    } 

} 

だから私は、このようなチャートがあります。