Highcharts - объединять и накладывать столбцы - PullRequest
Новая
       6

Highcharts - объединять и накладывать столбцы

0 голосов
/ 21 сентября 2018

Я нашел учебные пособия и ответы о том, как комбинировать диаграммы, накладывать их, но не обоих одновременно.

Вот изображение того, что я имею в виду:

enter image description here

Я попробовал кое-что, вот что я сделал до сих пор: http://jsfiddle.net/8vCEs/37/

var chart;
$(document).ready(function () {
    chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            type: 'column'
        },

        tooltip: {
            shared: false
        },

        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },

        series: [{
            name: '1',
            data: [100],
            grouping: false,

        }, {
            name: '2',
            grouping: true,
            stack: 1,
            data: [30],
        }, {
            name: '3',
            grouping: true,
            stack: 1,
            data: [20]
        }]
    });
});

Так что проблема, с которой я сталкиваюсь, заключается в том, чтобы сосредоточитьсяих, так что они все подходят друг другу.Я попробовал в качестве примера "pointPlacement: -0.2" на 3 графиках, но не изменил их положение

Спасибо за любую помощь.

Ответы [ 2 ]

0 голосов
/ 21 сентября 2018

Вам не нужно играть с pointPlacement, вот нужный вам конфиг: http://jsfiddle.net/8vCEs/50/

Краткое объяснение:

Фрагмент: 

var chart = new Highcharts.Chart({

  chart: {
    renderTo: 'container',
    type: 'column'
  },

  tooltip: {
    shared: false
  },

  plotOptions: {
    column: {
      grouping: false,
      stacking: 'normal'
    }
  },

  series: [{
    name: '1',
    stack: 0,
    data: [100],

  }, {
    name: '2',
    stack: 1,
    pointPadding: 0.2,
    data: [30],
  }, {
    name: '3',
    stack: 1,
    pointPadding: 0.2,
    data: [20]
  }]
});
0 голосов
/ 21 сентября 2018

Вы были близки с grouping.Вы можете получить его так, как вам хочется, установив для grouping значение false для всех серий и сделав ряд в стеке шире, уменьшив point padding этой серии.Как это: 

    plotOptions: {
      column: {
        stacking: 'normal',
        grouping: false,
      }
    },
    series: [{
      name: '1',
      data: [100],
      pointPadding: 0.05
    },...
    ]


var chart;
$(document).ready(function () {
    chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            type: 'column'
        },

        tooltip: {
            shared: false
        },

        plotOptions: {
            column: {
                stacking: 'normal',
                grouping: false,
            }
        },
        series: [{
            name: '1',
            data: [100],
            pointPadding: 0.05
        }, {
            name: '2',
            stack: 1,
            data: [30],
        }, {
            name: '3',
            
            stack: 1,
            data: [20]
        }]
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

Рабочий пример: http://jsfiddle.net/ewolden/8vCEs/48/

...