Question

我有一个类型图表＆＃34;散布＆＃34;我想改变数据点的大小，具体取决于y轴的值。小提琴：http://jsfiddle.net/g14dkv63/1/ 上面的例子将点的半径设置为＆＃39; 8＆＃39;，

plotOptions: {
        series: {
            marker: {
                radius: 8
            }
        }
    },

但是，如果半径范围在2px到20px之间，最小值为2px，最大值为20px，则可以根据点的计数/值动态设置半径。

Answer 1

每个点可以有不同的标记半径，因此将您的点映射到：

{
   y: value, 
   marker: {
     radius: /* calculated radius */
   }
}

映射数据：

var dataMax = Math.max.apply(null, data)
var dataMin = Math.min.apply(null, data)
var range = dataMax - dataMin
var rMax = 20
var rMin = 2

var mappedData = data.map(v => {
  var relSize = ((v - dataMin) / range)
  var radius = Math.floor(rMin + relSize * (rMax - rMin))

  return {
    y: v,
    marker: {
      radius: radius
    }
  }
})

示例：http://jsfiddle.net/2faLd444/

关于泡沫大小的一个注释：

人类视觉系统在面积方面自然会遇到磁盘大小。并且盘的面积 - 与其直径或周长不同 - 与其半径不成比例，而是与半径的平方成正比。因此，如果选择将磁盘的半径直接缩放到第三个数据值，那么磁盘之间的表观大小差异将是非线性的并且具有误导性。要获得适当的加权比例，必须将每个磁盘的半径缩放到相应数据值v3的平方根

src： https://en.wikipedia.org/wiki/Bubble_chart#Choosing_bubble_sizes_correctly

所以根据那个说明，如果你想要气泡成比例，你需要取半径的平方。

Answer 2

您可以使用bubble图表（需要highcharts-more.js）。当您使用类别时（如图表中所示），data数组中的每个项目都需要是一个包含两个元素的数组：Y值和气泡大小。

Highcharts.chart('container', {
  chart: {
    type: 'bubble'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
           .map(function(x) { return [x, x]; })
  }]
});

http://jsfiddle.net/g14dkv63/2/

如何根据data-yaxis-HIGHCHARTS中的值/计数更改数据点的半径

2 个答案: