Столбчатая диаграмма Highcharts с фиксированным макетом

Столбчатая диаграмма Highcharts

В следующем примере демонстрируется линейчатая диаграмма с фиксированным макетом.

В предыдущих главах мы изучили базовый синтаксис конфигурации Highcharts. Далее рассмотрим другие конфигурации. Добавьте конфигурации pointPlacement и pointPadding в series.

series.pointPadding

Управляет значением расстояния между каждым столбцом. Когда ширина диаграммы Highcharts фиксирована, чем больше это значение, тем меньше ширина столбца, и наоборот. Значение по умолчанию — 0.1.

series.pointPlacement

В столбчатых диаграммах, когда pointPlacement установлен в "on", точки на оси X не имеют промежутков. Если pointPlacement установлен в "between", столбцы располагаются в соответствии с отметками оси.

В версиях после Highcharts 3.0.2 pointPlacement может поддерживать числа. 0 — это значение на оси, -0.5 — интервал между текущим значением и предыдущим значением, а 0.5 — интервал между текущим значением и следующим значением. В отличие от текстовых настроек, числовые настройки не влияют на расстояние между осями.

series: {
   name: 'Employees',
   color: 'rgba(165,170,217,1)',
   data: [150, 73, 20],
   pointPadding: 0.3,
   pointPlacement: -0.2
}

Пример

Имя файла: highcharts_column_fixed.htm

<html>
<head>
<title>Highcharts 教程 | Example(example.com)</title>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="http://code.highcharts.com/highcharts.js"></script>  
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() { 
   var chart = {
      type: 'column'
   };
   var title = {
      text: 'Efficiency Optimization by Branch'   
   };   
   var xAxis = {
      categories: ['Seattle HQ', 'San Francisco', 'Tokyo']
   };
   var yAxis = [{
         min: 0,
         title: {
            text: 'Employees'
         }
      }, {
         title: {
            text: 'Profit (millions)'
         },
         opposite: true
   }];
   var legend = {
      shadow: false
   };
   var tooltip = {
      shared: true
   };
   var credits = {
      enabled: false
   };
   var plotOptions = {
      column: {
         grouping: false,
         shadow: false,
         borderWidth: 0
      }
   };
   var series= [{
       name: 'Employees',
            color: 'rgba(165,170,217,1)',
            data: [150, 73, 20],
            pointPadding: 0.3,
            pointPlacement: -0.2
        }, {
            name: 'Employees Optimized',
            color: 'rgba(126,86,134,.9)',
            data: [140, 90, 40],
            pointPadding: 0.4,
            pointPlacement: -0.2
        }, {
            name: 'Profit',
            color: 'rgba(248,161,63,1)',
            data: [183.6, 178.8, 198.5],
            tooltip: {
                valuePrefix: '$',
                valueSuffix: ' M'
            },
            pointPadding: 0.3,
            pointPlacement: 0.2,
            yAxis: 1
        }, {
            name: 'Profit Optimized',
            color: 'rgba(186,60,61,.9)',
            data: [203.6, 198.8, 208.5],
            tooltip: {
                valuePrefix: '$',
                valueSuffix: ' M'
            },
            pointPadding: 0.4,
            pointPlacement: 0.2,
            yAxis: 1      
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title; 
   json.xAxis = xAxis;
   json.yAxis = yAxis;
   json.credits = credits;
   json.legend = legend;
   json.tooltip = tooltip;
   json.plotOptions = plotOptions;
   json.series = series;
   $('#container').highcharts(json);
});

</script>
</body>
</html>

Результат вывода приведённого выше примера:

Столбчатая диаграмма Highcharts