Установите конкретный интервал между строками и столбцами в тепловых картах Highcharts - PullRequest
Новая
       24

Установите конкретный интервал между строками и столбцами в тепловых картах Highcharts

0 голосов
/ 07 октября 2019

Как видите, первая строка и последний столбец отделены от остальных большим пространством. Под первым рядом есть также тонкая горизонтальная серая линия.

Как мне достичь этого результата?

Fiddle

enter image description here

Highcharts.chart('container', {

  chart: {
    type: 'heatmap',
    marginTop: 40,
    marginBottom: 80,
    marginLeft: 300,
    marginRight: 170,
    plotBorderWidth: 0,
  },

  plotOptions: {
    series: {},
    heatmap: {
      // shared options for all heatmap series
      borderColor: '#ffffff',
      borderWidth: 100
    }
  },


  title: {
    text: ''
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov'],
    opposite: true,
  },

  yAxis: {
    categories: ['Human Resources 1', 'Human Resources 2', 'Human Resources 3', 'Human Resources 4', 'Human Resources'],
    title: null,
    labels: {
      align: 'left',
      x: -200
    },
  },
  colorAxis: {
    dataClasses: [{
      from: -1,
      to: 0,
      color: '#cccccc',
      name: 'N/A'
    }, {
      from: 0,
      to: 10,
      color: '#4cd093ff',
      name: 'Very Low Impact'
    }, {
      from: 0,
      to: 20,
      color: '#b4e788ff',
      name: 'Low Impact'
    }, {
      from: 20,
      to: 50,
      color: '#fff89dff',
      name: 'Medium Impact'
    }, {
      from: 50,
      to: 100,
      color: '#ffa271ff',
      name: 'High Impact'
    }, {
      from: 100,
      color: '#f46160ff',
      name: 'Very High Impact'
    }]
  },

  legend: {
    align: 'right',
    layout: 'vertical',
    margin: 0,
    verticalAlign: 'top',
    y: 25,
    squareSymbol: false,
    itemMarginTop: 30,
    symbolRadius: 0,
    symbolHeight: 40,
    symbolWidth: 5,
    useHTML: true,
    itemStyle: {
      "color": "#333333",
      "cursor": "pointer",
      "fontSize": "12px",
      "textOverflow": "ellipsis"
    }

  },

  tooltip: {
    formatter: function() {
      return '<b>In ' + this.series.xAxis.categories[this.point.x] + '</b> impact of <br><b>' +
        this.point.value + '</b> for <b>' + this.series.yAxis.categories[this.point.y] + '</b>';
    }
  },

  series: [{
    name: 'Sales per employee',
    // rowsize: 0.5,
    borderWidth: 2,
    data: [
      [0, 0, 10],
      [0, 1, 19],
      [0, 2, 8],
      [0, 3, 24],
      [0, 4, 67],
      [1, 0, 92],
      [1, 1, 58],
      [1, 2, 78],
      [1, 3, 117],
      [1, 4, 48],
      [2, 0, 35],
      [2, 1, 15],
      [2, 2, 123],
      [2, 3, 64],
      [2, 4, 52],
      [3, 0, 72],
      [3, 1, 132],
      [3, 2, 114],
      [3, 3, 19],
      [3, 4, 16],
      [4, 0, 38],
      [4, 1, 5],
      [4, 2, 8],
      [4, 3, 117],
      [4, 4, 115],
      [5, 0, 88],
      [5, 1, 32],
      [5, 2, 12],
      [5, 3, 6],
      [5, 4, 120],
      [6, 0, 13],
      [6, 1, 44],
      [6, 2, 88],
      [6, 3, 98],
      [6, 4, 96],
      [7, 0, 31],
      [7, 1, 1],
      [7, 2, 82],
      [7, 3, 32],
      [7, 4, 30],
      [8, 0, 85],
      [8, 1, 97],
      [8, 2, 123],
      [8, 3, 64],
      [8, 4, 84],
      [9, 0, 47],
      [9, 1, 114],
      [9, 2, 31],
      [9, 3, 48],
      [9, 4, 91]
    ],
    dataLabels: {
      enabled: false,
      color: '#000000'
    }
  }, ]
});
#container {
  min-width: 310px;
  max-width: 800px;
  height: 400px;
  margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>

1 Ответ

1 голос
/ 07 октября 2019

Вы можете достичь этого результата, используя xAxis.breaks, yAxis.plotLines и Highcharts.SVGRenderer, чтобы визуализировать прямоугольник, который покрывает разрыв на оси x. Проверьте демо и код, размещенный ниже.

Код: 

  chart: {
    events: {
      render: function() {
        var chart = this,
          xAxis = chart.xAxis[0],
          x = xAxis.toPixels(8.5),
          y = chart.plotTop,
          width = (xAxis.toPixels(1) - xAxis.toPixels(0.5)) * 0.6,
          element;

        if (chart.customElements) {
          chart.customElements.forEach(function(elem) {
            elem.destroy();
          });
        }

        chart.customElements = [];

        element = chart.renderer.rect(x, y, width, chart.plotHeight).attr({
          fill: '#fff',
          zIndex: 100
        }).add();

        chart.customElements.push(element);
      }
    }
  },
  xAxis: {
    breaks: [{
      breakSize: 0.6,
      from: 8.5,
      to: 9
    }]
  },
  yAxis: {
    plotLines: [{
      value: 3.5,
      width: 5,
      color: '#fff',
      zIndex: 100
    }, {
      value: 3.5,
      width: 1,
      color: '#ccc',
      zIndex: 101
    }]
  }

Демо:

Ссылка API:

...