Angular Highcharts - Plage de colonnes

Voici un exemple de graphique à colonnes utilisant des plages.

Nous avons déjà vu la configuration utilisée pour dessiner un graphique dans le chapitre Syntaxe de configuration Highcharts .

Un exemple de graphique à colonnes utilisant des plages est donné ci-dessous.

Configurations

Voyons maintenant des configurations supplémentaires.

graphique

Configurez le type de graphique pour qu'il soit basé sur une plage de colonnes. chart.type décide du type de série du graphique. La valeur par défaut est "ligne".

var chart = {
   type: 'columnrange',
   inverted: true
};

Exemple

app.component.ts

import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
import addMore from "highcharts/highcharts-more";
addMore(Highcharts)
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   highcharts = Highcharts;
   chartOptions = {   
      chart : {
         type: 'columnrange',
         inverted:true
      },
      title : {
         text: 'Temperature variation by month'   
      },
      subtitle : {
         text: 'Observed in Vik i Sogn, Norway, 2009'   
      },
      xAxis : {
         categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']      
      },
      yAxis : {     
         title: {
            text: 'Temperature ( \xB0C )'         
         }      
      },
      tooltip: {
         headerFormat: '<span style = "font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style = "color:{series.color};padding:0">{series.name}: </td>' +
            '<td style = "padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
         shared: true,
         useHTML: true
      },
      plotOptions : {
         columnrange: {
            dataLabels: {
               enabled: true,
               formatter: function () {
                  return this.y + '\xB0C';
               }
            }
         }
      },
      credits : {
         enabled: false
      },
      series : [{
         name: 'Temperatures',
         data: [
            [-9.7, 9.4],
            [-8.7, 6.5],
            [-3.5, 9.4],
            [-1.4, 19.9],
            [0.0, 22.6],
            [2.9, 29.5],
            [9.2, 30.7],
            [7.3, 26.5],
            [4.4, 18.0],
            [-3.1, 11.4],
            [-5.2, 10.4],
            [-13.5, 9.8]
         ]
      }]
   };
}

Résultat

Vérifiez le résultat.