Javascript 如何在谷歌艺术中使用独特的颜色_Javascript_Google Maps_Maps_Google Visualization

Javascript 如何在谷歌艺术中使用独特的颜色

javascript google-maps maps google-visualization

Javascript 如何在谷歌艺术中使用独特的颜色,javascript,google-maps,maps,google-visualization,Javascript,Google Maps,Maps,Google Visualization,我了解如何使用地质艺术显示连续数据（即温度）但如何配置它以显示不同的数据集（共和党、民主党和独立的州）？这可能吗谢谢你试过这样的东西吗 data.addColumn('string', 'State'); data.addColumn('number', 'Votes (%)'); data.addColumn('string', 'Winner'); data.addRows([['Alabama', 56, 'Republicans'],['Maine', 61, 'Democrats

我了解如何使用地质艺术显示连续数据（即温度）

但如何配置它以显示不同的数据集（共和党、民主党和独立的州）？这可能吗

谢谢

你试过这样的东西吗

data.addColumn('string', 'State');
data.addColumn('number', 'Votes (%)');
data.addColumn('string', 'Winner');
data.addRows([['Alabama', 56, 'Republicans'],['Maine', 61, 'Democrats']]);

目前，不可能以这种方式使用艺术。为了实现这一点，我最终使用了svg映射，并通过css更改了填充

在这里可以找到一个很好的教程：

您也可以通过稍微调整数据和使用标签的格式化值来解决这个问题。您应该能够将以下代码粘贴到中以查看示例：

function drawVisualization() {
  var geoData= new google.visualization.DataTable();
  geoData.addRows(2);
  geoData.addColumn('string', 'State');
  geoData.addColumn('number', 'Votes (%)');

  geoData.setValue(0, 0, 'Alabama');
  geoData.setValue(0, 1, 0);
  geoData.setFormattedValue(0, 1, '56%');

  geoData.setValue(1, 0, 'Maine');
  geoData.setValue(1, 1, 1);
  geoData.setFormattedValue(1, 1, '64%');

  var options = {};
  options['region'] = 'US';
  options['resolution'] = 'provinces';
  options['colorAxis'] = { minValue : 0, maxValue : 1, colors : ['#FF0000','#0000FF']};
  options['backgroundColor'] = '#FFFFFF';
  options['datalessRegionColor'] = '#E5E5E5';
  options['width'] = 556;
  options['height'] = 347;
  options['legend'] = 'none';

  var geochart = new google.visualization.GeoChart(
      document.getElementById('visualization'));
  geochart.draw(geoData, options);
}

现在可以通过将分类转换为数字而不是参与方名称来实现。例如：

democrats = 0
independents = 1
republicans = 2

接下来，在colorAxis颜色数组中包括各方的颜色：

var options = {
  colorAxis: {
    colors: ['blue','green','red']
    ...
  }
}

下面的代码显示民主党州为蓝色，共和党州为红色，无党派州为绿色（数据是虚构的，我不知道哪个州更喜欢哪个党）


load（“可视化”、“1”、{packages:[“地球艺术”]}）；
setOnLoadCallback（DrawRegionMap）；
函数drawRegionsMap（）{
var data=google.visualization.arrayToDataTable([
[“国家”、“缔约方”]，
[US-NY'，0]，
[US-AB'，2]，
[US-TX'，2]，
[US-CA'，0]，
[US-AK'，2]，
[US-MI'，1]
]);
变量选项={
显示模式：“区域”，
决议：“各省”，
颜色轴：{
颜色：[“蓝色”、“绿色”、“红色”]，
最小值：0，
maxValue:2}，
地区：'美国'，
图例：“无”
};
var chart=new google.visualization.geograpart（document.getElementById（'regions_div'））；
图表绘制（数据、选项）；
}

只要colorAxis中列出的颜色与用于状态的分类数量和顺序相匹配，就可以控制状态的颜色

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["geochart"]});
      google.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {

      var data = google.visualization.arrayToDataTable([
        ['State', 'Party'],
        ['US-NY', 0],
        ['US-AB', 2],
        ['US-TX', 2],
        ['US-CA', 0],
        ['US-AK', 2],
        ['US-MI', 1]
      ]);

      var options = {
        displayMode: 'regions',
        resolution:'provinces',
        colorAxis:{
          colors:['blue','green','red'],
          minValue: 0,
          maxValue:2},
       region:'US',
       legend:'none'
      };

      var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

     chart.draw(data, options);
  }
</script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>