如何在 HighChart 中堆叠列中的系列之间添加空间？答案

【问题标题】：How to add space between series in stacked columns in HighChart?如何在 HighChart 中堆叠列中的系列之间添加空间？
【发布时间】：2017-01-31 10:46:35
【问题描述】：

我在 Angular2 项目中使用 HighCharts。图表中有几个系列。现在它看起来像：

代码是：

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/

【问题讨论】：

您介意让您的代码可运行吗？（在这里，在 JSFiddle 等上。）
当绿色列超过8时，超时列应该怎么办？
当绿色列在8以上时，加班应该在绿色以上。

标签： javascript angular charts highcharts bar-chart

【解决方案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);
    }
  }

}

所以我有这样的图表：

【讨论】：