Gráficos angulares - intervalo de coluna
A seguir está um exemplo de um Gráfico de colunas usando intervalos.
Já vimos a configuração usada para desenhar um gráfico no capítulo Highcharts Configuration Syntax .
Um exemplo de Gráfico de colunas usando intervalos é fornecido abaixo.
Configurações
Vamos agora ver configurações adicionais.
gráfico
Configure o tipo de gráfico para ser baseado em 'columnrange'. chart.type decide o tipo de série do gráfico. O valor padrão é "line".
var chart = {
type: 'columnrange',
inverted: true
};
Exemplo
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]
]
}]
};
}
Resultado
Verifique o resultado.