如何使用Highchart在气泡图中显示色轴？

Question

我需要使用带有[x，y，z]值的气泡高图来开发颜色轴，以供参考https://developers.google.com/chart/interactive/docs/gallery/bubblechart#color-by-numbers

我需要开发上面提到的泡泡图，它是在谷歌图表中开发的高图[泡泡]。

Answer 1

基于此主题的答案 - stepped-color-shading-in-highcharts-doughnut-chart。

包装泡泡的原型：

var bubbleProto = Highcharts.seriesTypes.bubble.prototype;

  bubbleProto.axisTypes = ['xAxis', 'yAxis', 'colorAxis'];
  bubbleProto.optionalAxis = 'colorAxis';
  bubbleProto.colorKey = 'y';

  Highcharts.wrap(bubbleProto, 'translate', function(proceed) {
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));

    Highcharts.seriesTypes.heatmap.prototype.translateColors.call(this);
  });

实例和输出

http://jsfiddle.net/4y3qgdmn/41/

Answer 2

自Highcharts v7.2.0起，您可以添加coloraxis模块并将其用于几乎所有系列类型：

Highcharts.chart('container', {
    ...,

    colorAxis: {
        minColor: '#c6e48b',
        maxColor: '#196127'
    }
});

实时演示： http://jsfiddle.net/BlackLabel/swL0ngvm/

API参考： https://api.highcharts.com/highcharts/colorAxis

博客： https://www.highcharts.com/blog/news/color-coded-data/