Как сделать эту таблицу?Или как сложить столбцы исправления, как это?

Question

Я должен сделать этот тип диаграммы, используя highcharts-vue, проблема в том, что это не тип диаграммы по умолчанию, такой как линия или столбец.Я не уверен, как складывать столбцы исправлений, подобные этой, и делать так, чтобы они только окрашивали столбцы с данными.

Answer 1

Вы можете достичь этого, используя column-stacked график.Проверьте демо и код, указанный ниже.

Код:

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: ''
  },
  credits: {
  	enabled: false
  },
  xAxis: {
  	lineWidth: 0,
    offset: -30,
    categories: ['3Q19', '2Q18', '1Q18', '4Q17', '3Q17']
  },
  yAxis: {
		title: {
    	text: ''
    },
    categories: ['1st', '2st', '3st', '4st'],
    gridLineWidth: 0,
    reversed: true,
    labels: {
    	formatter: function () {
      	var cat = ['1st', '2st', '3st', '4st'],
        	value = cat.includes(this.value);

      	return value ? this.value : '';
      },
      y: 40
    }
  },
  legend: {
    enabled: false
  },
  tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      groupPadding: 0.05,
      color: '#fff',
      borderWidth: 2,
      borderColor: '#000',
      dataLabels: {
        enabled: false
      }
    }
  },
  series: [{
    name: 'A',
    data: [1, 1, 1, 1, 1]
  }, {
    name: 'B',
    data: [{
    	y: 1,
      color: '#C4D8FE'
    }, {
    	y: 1,
      color: '#C4D8FE'
    }, 1, 1, 1]
  }, {
    name: 'C',
    data: [1, 1, {
    	y: 1,
      color: '#C4D8FE'
    }, {
    	y: 1,
      color: '#C4D8FE'
    }, 1]
  }, {
    name: 'D',
    data: [1, 1, 1, 1, {
    	y: 1,
      color: '#C4D8FE'
    }]
  }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; max-width: 600px; height: 400px; margin: 0 auto"></div>

Демо:

• https://jsfiddle.net/BlackLabel/zdgukqjs/