Как сделать сплит-сгруппированную столбчатую диаграмму в столбцах с процентами?

Question

Мне нужен график, похожий на этот график с переключателем

, где на графике он сгруппирован с такими странами, как Зеленый -IN, Желтый-США, Оранжевый-Великобритания

и моя структура данных выглядит как

 [
  {
  "names":["App Launch","Add to cart"]
  },
  {
  "IN":[3,3],
  "US":[1,1],
  "UK":[4,2]
  }
 ]

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

Answer 1

Если вы хотите использовать переключатель для переключения между процентом и количеством, я предлагаю вам перерисовать диаграмму с другими атрибутами, а не с помощью групп. Существует атрибут с именем stacking, который можно установить на percent или normal. Значение normal - это то, что дает вам ваш «счет» или общее количество (см. Документацию на https://api.highcharts.com/highcharts/plotOptions.series.stacking).

Я создал версию вашей диаграммы с помощью переключателя: https://jsfiddle.net/brightmatrix/1f4k8gop/. Вы также можете взглянуть на фрагмент кода ниже. Я добавил комментарии, чтобы вы могли видеть, что происходит ... Надеюсь, это будет полезным для вас, как для новичка в Highcharts.

Я поместил параметры диаграммы Highcharts в переменную (chartOptions). Таким образом, вы можете изменить параметры позже и перерисовать диаграмму с новыми параметрами. Я установил простую функцию (см. Конец части Javascript), которая изменяет атрибут stacking при каждом нажатии переключателей. Это перерисовает диаграмму, чтобы отобразить значения в процентах от общего числа пользователей или от общего числа пользователей. Затем я установил триггер, чтобы опция «процент» была выбрана при первой загрузке страницы.

Если у вас есть какие-либо вопросы о том, как все это работает, оставьте мне комментарий, и я буду рад объяснить.

Также: чтобы ответить на другой вопрос в вашем вопросе, группы не будут работать. Столбчатую диаграмму можно составлять только одним способом: либо все значения в процентах, либо все значения в виде числа. Вы не можете иметь и то и другое на одном графике, как показано на вашей картинке. Группы предназначены для сравнения наборов столбцов между собой, а не для их объединения друг с другом.

// set the chart options to a variable so we can change them later
var chartOptions = {
    chart: {
        type: 'column', renderTo: 'container'
    },
    title: {
        text: 'Use of our apps'
    },
    xAxis: {
        categories: ['App 1', 'App 2', 'App 3']
    },

    yAxis: {
        allowDecimals: false,
        min: 0,
        title: {
            text: 'Number of users'
        }
    },
    tooltip: {
    	// for this formatter function, we want to change what
      // shows up in the box based on whether we're showing 
      // a count or a percentage of the values
      formatter: function () {
        var total = 0; // the total of the values we're showing
        var s = '<b>' + this.x + '</b><br/>'; // tooltip header
        // go through each item in the column
        $.each(this.points, function (i, point) {
          switch(this.series.options.stacking) {
            case 'percent':
              s += this.series.name + ': ' + Highcharts.numberFormat(this.percentage,0) + '<br/>';
              total += this.percentage;
              break;
            case 'normal':
              s += this.series.name + ': ' + this.y + '<br/>';
              total += this.y;
              break;
          } 
        });
        return s + 'Total: ' + total;
      }, shared: true
    },
    plotOptions: {
        column: {
            stacking: 'normal' // this will be our default
        }
    },
    series: [{
        name: 'IN',
        data: [5, 3, 4]
    }, {
        name: 'US',
        data: [2, 5, 6]
    }, {
        name: 'UK',
        data: [3, 0, 4]
    }]
};

// whenever someone clicks on a radio button, draw the chart
$('.ToggleFormRadio').click(function() {
  switch($(this)[0].value) {
  	case 'percentage':
    	chartOptions.plotOptions.column.stacking = 'percent';
      chartOptions.yAxis.title.text = 'Number of users (%)';
      var chart = Highcharts.chart(chartOptions);
      break;
  	case 'count':
    	chartOptions.plotOptions.column.stacking = 'normal';
      chartOptions.yAxis.title.text = 'Number of users';
      var chart = Highcharts.chart(chartOptions);
      break;
  }
});

// when the page is first loaded, trigger a click for the default
$('#ToggleFormRadio1').trigger('click');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<form id="ToggleForm">
  <input type="radio" name="ToggleFormRadio" class="ToggleFormRadio" id="ToggleFormRadio1" value="percentage" checked="checked"><label for="ToggleFormRadio1" >Percentage</label>
  <input type="radio" name="ToggleFormRadio" class="ToggleFormRadio" id="ToggleFormRadio2" value="count"><label for="ToggleFormRadio2">Count</label>
</form>

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