如何更改谷歌图表geomap中的默认颜色?

时间:2015-05-27 12:28:48

标签: javascript google-visualization geomap

我想将图表区域的默认黄色更改为用户定义的颜色。我只能改变标记颜色。我使用此代码生成图表数据。

         dataTable = new google.visualization.DataTable();
         dataTable.addRows(4);
         dataTable.addColumn('number', 'LATITUDE', 'Latitude');
         dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
         dataTable.addColumn('number', 'Ticket', 'Value'); 
         dataTable.addColumn('string', 'HOVER', 'HoverText');

         dataTable.setValue(0,0,12.9715987);
         dataTable.setValue(0,1,77.5945627);
         dataTable.setValue(0,2,43);
         dataTable.setValue(0,3,"Banglore");

         dataTable.setValue(1,0,22.642664);
         dataTable.setValue(1,1,88.439122);
         dataTable.setValue(1,2,66);
         dataTable.setValue(1,3,"Kolkatta");

         dataTable.setValue(2,0,13.0826802);
         dataTable.setValue(2,1,80.2707184);
         dataTable.setValue(2,2,54);
         dataTable.setValue(2,3,"Chennai");

         dataTable.setValue(3,0,9.9252007);
         dataTable.setValue(3,1,78.1197754);
         dataTable.setValue(3,2,64);
         dataTable.setValue(3,3,"Madurai");

enter image description here

如何更改区域,背景和工具提示颜色?请帮帮我

2 个答案:

答案 0 :(得分:0)

有一个ticket on github for this

以下代码基本上设置了您需要的选项

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);

这也包含在official docs

  

的backgroundColor

     

图表主要区域的背景颜色。可以是一个   简单的HTML颜色字符串,例如:' red'或者'#00cc00'或者   具有以下属性的对象。

     

类型:字符串或对象默认值:白色

     

backgroundColor.fill

     

图表填充颜色,作为HTML颜色字符串。

     

类型:字符串默认值:白色

     

backgroundColor.stroke

     

图表边框的颜色,作为HTML颜色字符串。

     

类型:字符串默认值:'#666'

     

backgroundColor.strokeWidth

     

边框宽度,以像素为单位。

     

类型:数字默认值:0

答案 1 :(得分:0)

嘿,这对我有用

colors: ['#0077CC']

您可以在选项中添加它,例如:-

var options = {
    region: 'IN',
    displayMode: 'markers',
    colorAxis: {colors: ['blue']}
  };

有关更多信息,您可以访问Link