简体   繁体   中英

How to change Default color in google charts geomap?

I want to change the default yellow color of chart region to user defined color. I can able to change only marker color. I used this code to generate chart data.

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

在此处输入图片说明

How to change the region, background and tooltip color? please help me

There is aaticket on github for this

Basically the code below set's the options your need

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

this is also covered in the official docs

backgroundColor

The background color for the main area of the chart. Can be either a simple HTML color string, for example: 'red' or '#00cc00', or an object with the following properties.

Type: string or object Default: white

backgroundColor.fill

The chart fill color, as an HTML color string.

Type: string Default: white

backgroundColor.stroke

The color of the chart border, as an HTML color string.

Type: string Default: '#666'

backgroundColor.strokeWidth

The border width, in pixels.

Type: number Default: 0

Hey this worked for me

colors: ['#0077CC']

You can add this in Options Like :-

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

For more information you can visit Link

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM