ハイチャート - バブルチャート - 比例バブル

Question

私は、ユーザーが選択したデータに基づいてハイチャートバブルチャートを作成しています。

私は、図表の泡がお互いに比例していることを期待していました（つまり、 '2'の泡はマルチペア図で一貫しています）。しかし、それはチャート。あなたが見ることができるようにこれはthis fiddle

で強調表示され

、チャートの1位に6 『「チャートの2位で2さんと同じサイズです』。 私はチャート＃2の '2'をチャート＃1の '2'のサイズと一致させたいと思います。

これを達成する方法はありますか？ここで

はコードです：

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

これは私が他の場所でスタックオーバーフロー上の別のバブルチャートの質問への答えとして提案していたものと似ています、あなたの状況については

Highcharts 3.0 Bubble Chart -- Controlling bubble sizes

それをあなたのチャートで可能な最大の次元を持つ透明で非インタラクティブな「ダミー」バブルを追加すると、他のバブルをそれぞれ適切な比率に保ちます：

これはあなたの問題を解決場合は私に知らせてください：

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

ここでは、この修正プログラムを使用してフィドルの更新されたバージョンです！