2016-05-16 2 views
3

J'ai créé un graphique à bulles de Highcharts comme suit:Highcharts - Tableau Bubble - Déplacement quadrillages

jsFiddle

Si possible, je voudrais les au milieu des bulles quadrillages un axe pour être.

Y a-t-il un moyen d'y parvenir?

Voici le code:

$(function() { 

    var data = [{ x: 0, y: 1, z: 1, dataSeries: 'data #1', dataPerc: '1.2' }, 
       { x: 1, y: 2, z: 2, dataSeries: 'data #2', dataPerc: '2.2' }, 
       { x: 2, y: 0, z: 0, dataSeries: 'data #3', dataPerc: '19.2' }, 
       { x: 3, y: 7, z: 7, dataSeries: 'data #4', dataPerc: '12.0' }, 
       { x: 4, y: 5, z: 5, dataSeries: 'data #5', dataPerc: '24' }, 
       { x: 5, y: 4, z: 4, dataSeries: 'data #6', dataPerc: '12' }, 
       { x: 6, y: 3, z: 3, dataSeries: 'data #7', dataPerc: '15.3' }, 
       { x: 7, y: 3, z: 3, dataSeries: 'data #8', dataPerc: '1.2' }];   

    $('#container').highcharts({ 

     chart: { 
      type: 'bubble', 
      plotBorderWidth: 1, 
      zoomType: 'xy' 
     }, 
      credits: false, 

     legend: { 
      enabled: false 
     }, 

     title: { 
      text: '' 
     }, 

     xAxis: { 
      gridLineWidth: 1, 
      title: { 
       text: '' 
      }, 
      categories: ['data #1', 'data #2', 'data #3', 'data #4', 'data #5', 'data #6', 'data#7', 'data #8'] 
     }, 

     yAxis: { 
      startOnTick: true, 
      min: 0, 
      max: 7, 
      title: { 
       text: 'Score' 
      }, 
      labels: { 
       format: '{value}' 
      }, 
      maxPadding: 0.2 
     }, 

     tooltip: { 
      useHTML: true, 
      headerFormat: '<table>', 
      pointFormat: '<tr><th colspan="2"><h3>{point.dataSeries}</h3></th></tr>' + 
       '<tr><th>Score:</th><td>{point.y}</td></tr>' + 
       '<tr><th>Percentage:</th><td>{point.dataPerc}%</td></tr>', 
      footerFormat: '</table>', 
      followPointer: true 
     }, 

     plotOptions: { 
      series: { 
       dataLabels: { 
        enabled: true, 
        format: '{point.name}' 
       } 
      } 
     }, 
     series: [{ data: data }] 
    }); 
}); 

Répondre

6

Vous pouvez utiliser le tickmarkPlacement option:

xAxis: { 
    tickmarkPlacement: 'on' 
} 

Pour les axes catégorisés seulement. Si on la coche est placée au centre de la catégorie, si between la coche est placée entre les catégories. La valeur par défaut est between si le tickInterval est 1, sinon on. La valeur par défaut est null.

Voir this updates JSFiddle pour un exemple.

+0

Cracking - Merci :) –