javascript - 谷歌地理图表 : Get fill color of a specific series

Question

我创建了一个显示美国 map 的地理图表:

var data = google.visualization.arrayToDataTable(response.data.states);
                var formatter = new google.visualization.NumberFormat({
                    pattern: '$###,###.##'
                });
                formatter.format(data, 1);

                var options = {
                    region: 'US',
                    displayMode: 'regions',
                    resolution: 'provinces',
                    colorAxis: {
                        colors: ['#e6f4ff', '#008ffb', '#ff4560']
                    },
                    geochartVersion: 11,
                    legend: {
                        numberFormat: '$###,###.##'
                    },
                };

                var chart = new google.visualization.GeoChart(document.getElementById(='kt_charts_states'));
                chart.draw(data, options);

现在这正确地创建了图表并且每个状态填充基于 colorAxis 选项的渐变比例。我的问题是:您如何获得状态/系列的特定填充颜色？例如:

编辑:

这是我正在使用的一些示例数据:

[
['State', 'Sales', 'Order Count'],
['Alabama', 5939.95, 6],
['Arizona', 5256.83, 9],
['Arkansas', 7917.89, 14],
['California', 24587.1, 37],
['Colorado', 7494.87, 8],
]

Answer 1

我们可以使用公式自己插入颜色:

r = (1 - point - start)/end * r1  +  (point-start)/end * r2
g = (1 - point - start)/end * g1  +  (point-start)/end * g2
b = (1 - point - start)/end * b1  +  (point-start)/end * b2

where,
rgb    - the color we want to find on the gradient
r1g1b1 - starting color
r2g2b2 - end color
point  - sales value of the state
start  - minimum sales: $80
end    - maximum sales: $25,460.26

使用上面的公式，下面的演示考虑了 colorAxis/gradient 上的多种颜色。并在左上角显示状态名称及其对应名称。

let info = [
  ['State', 'Sales', 'Order Count'],
  ['Alabama', 1939.95, 6],
  ['Arizona', 5256.83, 9],
  ['Arkansas', 7917.89, 14],
  ['California', 20587.1, 32],
  ['Colorado', 7494.87, 8],
  ['Idaho', 80, 1],
  ['Missouri', 25460.26, 40],
  ['Texas', 13000, 20],
];

let gradient = ['#e6f4ff', '#008ffb', '#ff4560'];
let range = {
  start: 80,
  end: 25460.26
};

google.charts.load('current', {
  'packages': ['geochart'],
  // Note: Because this chart requires geocoding, you'll need mapsApiKey.
  // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable(info);
  var formatter = new google.visualization.NumberFormat({
    pattern: '$###,###.##'
  });
  formatter.format(data, 1);
  var options = {
    region: 'US',
    displayMode: 'regions',
    resolution: 'provinces',
    colorAxis: {
      colors: gradient
    },
    geochartVersion: 11,
    legend: {
      numberFormat: '$###,###.##'
    },
  };

  var chart = new google.visualization.GeoChart(document.getElementById('kt_charts_states'));
  chart.draw(data, options);
};

// display colors for each state
let content = ''
info.forEach((state, i) => {
  if (i === 0) return;
  content += `<div style='background-color: ${getStateColor(gradient, range, state[1])}'>${state[0]}</div>`;
});
stat.innerHTML = content;

// interpolate colors
function getStateColor(gradient, range, value) {
  let colors = gradient.map(c => hexToRgb(c));
  let sectionLength = (range.end - range.start) / (gradient.length - 1);
  let section = (value / sectionLength) | 0;
  if (section + 1 == gradient.length) section -= 1;

  value = value - sectionLength * section - range.start;
  let result = ['r', 'g', 'b'].map(c => {
    // interpolate color from start color to end color
    let out = (1 - (value / sectionLength)) * colors[section][c];
    out += (value / sectionLength) * colors[section + 1][c];
    return Math.ceil(out);
  });
  return rgbToHex(...result);
}

// utility functions
function hexToRgb(hex) {
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

function rgbToHex(r, g, b) {
  return "#" + ((1 << 24) + ((r | 0) << 16) + ((g | 0) << 8) + (b | 0)).toString(16).slice(1);
}

#kt_charts_states{
   width: 95vw;
   height:92vh;
}

#stat {
  position: fixed;
  top: .5rem;
  right: 1rem;
}
#stat div{
  width: 100px
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="kt_charts_states"></div>
<div id="stat"></div>