高图表.气泡图.比例气泡
高图表.气泡图.比例气泡
提问于 2016-05-23 08:58:27
我正在根据用户选择的数据制作高图表气泡图。
我本以为图表上的气泡是按比例大小的(例如，“2”的气泡通过多个图表是一致的)，然而，它似乎是基于图表上的点的范围。
这在这把小提琴中突出显示
如你所见，图#2中的'2‘与图#1中的'6’大小相同。我希望图表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 }]
});
});回答 1
Stack Overflow用户
回答已采纳
发布于 2016-05-23 11:47:22
这类似于我在堆栈溢出的其他地方提出的另一个气泡图问题的答案：
对于您的情况，似乎添加了一个透明的、非交互式的“虚拟”泡泡，在图表中尽可能多的尺寸将保持其他气泡的适当比例：
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}
]下面是您修改此修补程序的最新版本：http://jsfiddle.net/brightmatrix/svcuLgso/13/
如果这解决了你的问题，请告诉我！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37386731
复制相关文章
相似问题
腾讯云开发者
