Question

我需要一个与此chart with radio button类似的图表

在图表中按哪个国家/地区分组，例如Green -IN，Yellow-US，Orange-UK

我的数据结构看起来像

 [
  {
  "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>

如何在高图中按百分比制作分组分组的柱状条形图？

1 个答案: