基本ハイチャートバブルドリルダウン

Question

私はHighchartsで新しくなりました。ドリルダウンバブルチャートを作成しようとしています。

私はすべて、

http://jsfiddle.net/Slate_Shannon/kdwa9x7v/1/

$(function() { 

$('#container').highcharts({ 
chart: { 
    type: 'bubble' 
}, 
title: { 
    text: 'Basic drilldown' 
}, 
xAxis: { 
    type: 'linear' 
}, 

legend: { 
    enabled: false 
}, 

plotOptions: { 
    series: { 
    borderWidth: 0, 
    dataLabels: { 
     enabled: true 
    } 
    } 
}, 

series: [{ 
    name: 'Things', 
    colorByPoint: true, 
    data: [{ 
    name: 'Animals', 
    x: 4, 
    y: 5, 
    z: 10, 
    drilldown: 'animals' 
    }, { 
    name: 'Fruits', 
    x: 14, 
    y: 20, 
    z: 20, 
    drilldown: 'fruits' 
    }, { 
    name: 'Cars', 
    x: 8, 
    y: 9, 
    z: 7, 
    drilldown: 'cars' 
    }] 
}], 
drilldown: { 
    series: [{ 
    id: 'animals', 
    data: [ 
     ['Cats', x: 5, y: 9, z: 7], 
     ['Dogs', x: 8, y: 8, z: 9], 
     ['Cows', x: 1, y: 5, z: 2], 
     ['Sheep', x: 4, y: 7, z: 2], 
     ['Pigs', x: 4, y: 5, z: 7] 
    ] 
    }, { 
    id: 'fruits', 
    data: [ 
     ['Apples', x: 2, y: 9, z: 6], 
     ['Oranges', x: 6, y: 5, z: 1] 
    ] 
    }, { 
    id: 'cars', 
    data: [ 
     ['Toyota', x: 2, y: 8, z: 7], 
     ['Opel', x: 8, y: 2, z: 4], 
     ['Volkswagen', x: 4, y: 4, z: 4] 
    ] 
    }] 
} 
}); 
}); 

を、出発点として

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/basic/

chart: { 
    type: 'column' 
}, 
title: { 
    text: 'Basic drilldown' 
}, 
xAxis: { 
    type: 'category' 
}, 

legend: { 
    enabled: false 
}, 

plotOptions: { 
    series: { 
    borderWidth: 0, 
    dataLabels: { 
     enabled: true 
    } 
    } 
}, 

series: [{ 
    name: 'Things', 
    colorByPoint: true, 
    data: [{ 
    name: 'Animals', 
    y: 5, 
    drilldown: 'animals' 
    }, { 
    name: 'Fruits', 
    y: 2, 
    drilldown: 'fruits' 
    }, { 
    name: 'Cars', 
    y: 4, 
    drilldown: 'cars' 
    }] 
}], 
drilldown: { 
    series: [{ 
    id: 'animals', 
    data: [ 
     ['Cats', 4], 
     ['Dogs', 2], 
     ['Cows', 1], 
     ['Sheep', 2], 
     ['Pigs', 1] 
    ] 
    }, { 
    id: 'fruits', 
    data: [ 
     ['Apples', 4], 
     ['Oranges', 2] 
    ] 
    }, { 
    id: 'cars', 
    data: [ 
     ['Toyota', 4], 
     ['Opel', 2], 
     ['Volkswagen', 2] 
    ] 
    }] 
} 

を基本的な柱ドリルダウンを取り、これを取得するには、それを少し編集しました私はした

"バブル" へ

• 変更、グラフの種類、
• 変更x軸は "リニア"

し、それが動作しません

、xとzのデータを追加します。

問題が表示されますか？

ありがとうございます！

おはよう。

Answer 1

ドリルダウンデータの書式設定が正しくないため、コンソールで表示されます。現在、あなたは持っています：

data: [ 
    ['Cats', x: 5, y: 9, z:7], 
    ['Dogs', x: 8, y: 8, z:9], 
    // ... 
] 

これは配列宣言とオブジェクト宣言の中間です。私はこのように、対象となる各項目への切り替えをお勧めしたい：

data: [ 
    { name: 'Cats', x: 5, y: 9, z:7 }, 
    { name: 'Dogs', x: 8, y: 8, z:9 }, 
    // ... 
] 

を第二に、あなたはバブルチャートの種類を含ん必要Highcharts、より多くのモジュールが含まれていません。それが動作する方法の基本的な例を参照this updated JSFiddle

<script src="https://code.highcharts.com/highcharts-more.js"></script> 

を：あなたはこのようなことを行うことができます。