Highcharts - Blasendiagramm - Proportionale Blasen

Question

Ich produziere Highcharts Blasendiagramme basierend auf benutzerdefinierten Daten.

Ich hätte erwartet, dass die Blasen in den Charts proportional zueinander sind (dh die Blase für eine '2' ist konsistent durch Multifile - Charts), scheint jedoch auf der Bandbreite der Punkte auf der Diagramm.

Dies ist in this fiddle

hervorgehoben, wie Sie die ‚2 ist in Diagramm # 2 die gleiche Größe wie die 'sehen können, # 6' in Grafik 1. Ich möchte, dass die '2' in Diagramm # 2 der Größe von '2' in Diagramm # 1 entspricht.

Gibt es eine Möglichkeit, dies zu erreichen?

Hier ist der 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

Dies ist ähnlich zu dem, was ich als Antwort auf eine andere Blasendiagramm Frage an anderer Stelle auf Stack-Überlauf vorgeschlagen hatte:

Für Ihre Situation

Highcharts 3.0 Bubble Chart -- Controlling bubble sizes

, es scheint eine transparente, nicht-interaktive "Dummy" -Blase mit den größtmöglichen Dimensionen in Ihrem Diagramm hinzufügen wird jede der anderen Blasen in den richtigen Proportionen zueinander halten:

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} 
] 

Hier ist eine aktualisierte Version Ihrer Geige mit diesem Update: http://jsfiddle.net/brightmatrix/svcuLgso/13/

Bitte lassen Sie mich wissen, ob dies Ihr Problem löst!