基本 Highcharts 气泡钻取答案

【问题标题】：Basic Highcharts Bubble Drilldown基本 Highcharts 气泡钻取
【发布时间】：2016-05-21 18:28:42
【问题描述】：

我是 Highcharts 的新手。我正在尝试创建一个向下钻取气泡图。

我以基本列向下钻取为起点，

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

并对其进行了一些编辑，得到这个，

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

我所做的只是

将图表类型更改为“气泡”，
添加 x 和 z 数据，
将 xaxis 更改为“线性”

它不起作用。

你能看出问题吗？

非常感谢！

美好的一天。

【问题讨论】：

标签： highcharts drilldown bubble-chart

【解决方案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-more 模块。你可以这样做：

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

请参阅this updated JSFiddle 了解其工作原理的基本示例。

【讨论】：

谢谢！太好了。