Таблица комбинаций старших диаграмм со столбцами с накоплением

Question

Я пытаюсь получить комбинированный график со столбцом и составным графиком для сводки.

Точно так же, как тот, который у них есть в демонстрационном разделе. однако в этом примере я хочу отобразить столбчатую диаграмму с накоплением вместо круговой диаграммы. Пример таблицы комбинаций Highcart

[this is not a link]https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/combo/

Ценю ваши предложения.

Answer 1

Этого можно добиться, добавив вторые оси и ряд столбцов, связанных с ними.Ряды должны иметь нулевые точки для создания смещения с правой стороны.Посмотрите приведенный ниже пример.

Код:

var defaultColumnSeries = {
  type: 'column',
  stacking: 'normal',
  dataLabels: {
    enabled: true,
    style: {
      fontSize: '9px'
    }
  },
  showInLegend: false,
  groupPadding: 0.1,
  yAxis: 1,
  xAxis: 1
}

Highcharts.chart('container', {
  title: {
    text: 'Combination chart'
  },
  xAxis: [{
    categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
  }, {
    categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums'],
    visible: false
  }],
  yAxis: [{

  }, {
    top: 30,
    height: 150,
    visible: false,
    stackLabels: {
      enabled: true,
      style: {
        fontWeight: 'bold',
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
      }
    }
  }],
  labels: {
    items: [{
      html: 'Total fruit consumption',
      style: {
        left: '20px',
        top: '-20px',
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
      }
    }]
  },
  series: [{
    type: 'column',
    name: 'Jane',
    data: [3, 2, 1, 3, 4]
  }, {
    type: 'column',
    name: 'John',
    data: [2, 3, 5, 7, 6]
  }, {
    type: 'column',
    name: 'Joe',
    data: [4, 3, 3, 9, 0]
  }, {
    type: 'spline',
    name: 'Average',
    data: [3, 2.67, 3, 6.33, 3.33],
    marker: {
      lineWidth: 2,
      lineColor: Highcharts.getOptions().colors[3],
      fillColor: 'white'
    }
  }, Highcharts.merge(defaultColumnSeries, {
  	data: [4, 3, 2, 6, 3, null, null, null, null, null, null, null, null, null, null, null]
  }), Highcharts.merge(defaultColumnSeries, {
  	data: [1, 4, 7, 3, 2, null, null, null, null, null, null, null, null, null, null, null]
  }), Highcharts.merge(defaultColumnSeries, {
  	data: [5, 2, 1, 3, 4, null, null, null, null, null, null, null, null, null, null, null]
  })]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Демо:

• https://jsfiddle.net/BlackLabel/jy02qsru/1/