Может ли диаграмма с высоким коэффициентом усиления в виде диаграмм меньше 100%

Question

У меня есть требование иметь столбчатую диаграмму столбчатых столбцов в диаграммах высокого разрешения, отображающую разбивку определенного процентного номера, а не разбивку на 100%. Например, если число составляет 60%, график должен показывать разбивку 60% (20% синий, 10% зеленый, 30% желтый), а не заполнять до 100%. Мое понимание процентных диаграмм заключается в том, что они всегда на 100%, но интересно, возможно ли подобное манипулирование с помощью высоких диаграмм? Благодарю.

Answer 1

Нравится @Alden Be сказал, используйте столбец с% меток. Вот JSFiddle example.

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Stacked column chart' 
     }, 
     xAxis: { 
      categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Percentage' 
      }, 
      labels: { 
       formatter: function() { 
        return this.value + '%'; 
       } 
      }, 
      stackLabels: { 
       enabled: true, 
       style: { 
        fontWeight: 'bold', 
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
       }, 
       formatter: function() { 
        return this.total + '%'; 
       } 
      } 
     }, 
     legend: { 
      align: 'right', 
      x: -30, 
      verticalAlign: 'top', 
      y: 25, 
      floating: true, 
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', 
      borderColor: '#CCC', 
      borderWidth: 1, 
      shadow: false 
     }, 
     tooltip: { 
      headerFormat: '<b>{point.x}</b><br/>', 
      pointFormat: '{series.name}: {point.y}%<br/>Total: {point.stackTotal}%' 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'normal', 
       dataLabels: { 
        enabled: true, 
        format:'{y}%', 
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white', 
        style: { 
         textShadow: '0 0 3px black' 
        } 
       } 
      } 
     }, 
     series: [{ 
      name: 'John', 
      data: [5, 3, 4, 7, 2] 
     }, { 
      name: 'Jane', 
      data: [2, 2, 3, 2, 1] 
     }, { 
      name: 'Joe', 
      data: [3, 4, 4, 2, 5] 
     }] 
    }); 
}); 

Answer 2

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