Highcharts - Diagramme à bulles - Bulles proportionnelles

Question

Je produis des diagrammes à bulles Highcharts basés sur les données sélectionnées par l'utilisateur. Je m'attendais à ce que les bulles sur les graphiques soient proportionnellement dimensionnées les unes par rapport aux autres (c'est-à-dire que la bulle d'un '2' soit cohérente à travers des diagrammes multilignes), mais semble être basée sur la gamme de points graphique.

Cela est souligné dans this fiddle

Comme vous pouvez le voir, les 2 » dans ce tableau n ° 2 sont de la même taille que le « 6 » dans le tableau n ° 1. Je voudrais que le '2' dans le tableau n ° 2 corresponde à la taille du '2' dans le tableau n ° 1.

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

Voici le code:

jQuery(function() { 

var data1 = [{ x: 0, y: 0, z: 0, label: 'data #1' }, 
      { x: 1, y: 1, z: 1, label: 'data #2' }, 
      { x: 2, y: 2, z: 2, label: 'data #3' }, 
      { x: 3, y: 3, z: 3, label: 'data #4' }, 
      { x: 4, y: 4, z: 4, label: 'data #5' }, 
      { x: 5, y: 5, z: 5, label: 'data #6' }, 
      { x: 6, y: 6, z: 6, label: 'data #7' }]; 

var data2 = [{ x: 0, y: 0, z: 0, label: 'data #1' }, 
      { x: 1, y: 1, z: 1, label: 'data #2' }, 
      { x: 2, y: 1, z: 1, label: 'data #3' }, 
      { x: 3, y: 2, z: 2, label: 'data #4' }, 
      { x: 4, y: 2, z: 2, label: 'data #5' }, 
      { x: 5, y: 1, z: 1, label: 'data #6' }, 
      { x: 6, y: 0, z: 0, label: 'data #7' }]; 

jQuery('#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'] 
    }, 

    yAxis: { 
     startOnTick: true, 
     min: -1, 
     max: 7, 
     showFirstLabel: false, 
     showLastLabel: false, 
     tickInterval: 1, 
     title: { 
      text: 'Score' 
     }, 
     labels: { 
      format: '{value}' 
     }, 
     maxPadding: 0.2 
    }, 

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

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


jQuery('#container2').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'] 
    }, 

    yAxis: { 
     startOnTick: true, 
     min: -1, 
     max: 7, 
     showFirstLabel: false, 
     showLastLabel: false, 
     tickInterval: 1, 
     title: { 
      text: 'Score' 
     }, 
     labels: { 
      format: '{value}' 
     }, 
     maxPadding: 0.2 
    }, 

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

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


}); 

Answer 1

Ceci est similaire à ce que j'avais proposé comme une réponse à une autre question de graphique à bulles ailleurs sur Stack Overflow:

Highcharts 3.0 Bubble Chart -- Controlling bubble sizes

Pour votre situation, Il semble que l'ajout d'une bulle "fictive" transparente et non interactive avec les plus grandes dimensions possibles dans votre diagramme gardera chacune des autres bulles dans les bonnes proportions les unes par rapport aux autres:

series: [{ data: data2 }, 
    // dummy series to keep all the bubbles in proportion 
    {name: 'dummy series', 
    data: [{x:6,y:6,z:6}], 
    showInLegend: false, 
    color: 'transparent', 
    enableMouseTracking: false} 
] 

est ici une version mise à jour de votre violon avec ce correctif: http://jsfiddle.net/brightmatrix/svcuLgso/13/

S'il vous plaît laissez-moi savoir si cela résout votre problème!