html,

body,

#container {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

anychart.onDocumentReady(function () {

  // créer un ensemble de données 

  var dataSet = anychart.data.set([

    28]],

  ]);

​

  var analyseData = roundDecimal(28.777, 1);

  //Créer le compteur anyChart

  var gauge = anychart.gauges.circular();

​

  //Reliée les données avec le compteur

  gauge

    .data(dataSet);

​

  //Création de la forme du compteur

  gauge

    .fill('white')

    .stroke(null)

    .padding(0)

    .margin(0, 30)

    .startAngle(270)

    .sweepAngle(180)

    .axis()

    .labels()

    .fontSize(8)

    .position('outside')

    .format('{%Value} %');

​

  //pour crée un label

  gauge

    .label(1)

    .text('<span style="color: red"> C16:0 = <strong>' + analyseData.toString().replace('.',',') + '</strong> % </span>')

    .useHtml(true)

    .hAlign('center')

    .anchor('center-top')

    .padding(5, 10)

    .fontSize(12)

    .offsetY(-15)

    .offsetX(90)

    .zIndex(1)

    .background({

      fill: 'white',

      stroke: '#c1c1c1',

      corners: 5,

      cornerType: 'ROUND'

    });

​

  // pour gerer les intervales de valeur

  gauge

    .axis()

    .scale()

    .minimum(25)

    .maximum(35)

    .ticks({

      interval: 5

    })

    .minorTicks({

      interval: 1

    });

​

  // pour gerer l'interface des intervales

  gauge

    .axis()

    .fill('grey')

    .width(1)

    .ticks({ type: 'line', fill: 'white', length: 2 });

​

  // Gestion des aiguilles

  gauge

    .needle()

    .stroke('4 #545f69')

    .startRadius('70%')

    .endRadius('97%')

    .startWidth('0.1%')

    .endWidth('0.1%')

    .middleWidth('0.1%');

​

  //Rond au milieu

  gauge.cap()

    .radius('45%')

    .enabled(true)

    .fill('#ffa000')

    .stroke('4 white');

​

  gauge.range(0, {

    from: 25,

    to: 27.5,

    position: 'inside',

    fill: '#64A70B',

    startSize: 30,

    endSize: 30,

    radius: 98

  });

​

  gauge.range(1, {

    from: 27.5,

    to: 30,

    position: 'inside',

    fill: '#9CC764',

    startSize: 30,

    endSize: 30,

    radius: 98

  });

​

  gauge.range(2, {

    from: 30,

    to: 32.5,

    position: 'inside',

    fill: '#C7DFA6',

    startSize: 30,

    endSize: 30,

    radius: 98

  });

​

  gauge.range(3, {

    from: 32.5,

    to: 35,

    position: 'inside',

    fill: '#E3EFD3',

    startSize: 30,

    endSize: 30,

    radius: 98

  });

​

​

  //gestion des tooltips

  gauge.tooltip().format(function (e) {

    var value = (this.value);

    return value + "%";

  });

​

  gauge.container('compteur');

  gauge.draw();

});