Question

我使用Geochart，我需要为标记设置不同的颜色：

制作国家：红色
原料国家：蓝色
...

在文档中，它只是注意到如何使用colorAxis.colors属性更改轴的颜色，但我不需要在项目中使用轴。

Answer 1

使用数据表中的第二列，
结合colorAxis.colors选项，
指定特定的颜色......

使用两个数字指定第二列中的颜色

在以下工作片段中，
0='red'
1='blue'

注意：以下选项将隐藏图例/轴刻度...
legend: 'none'

＆＃13;

google.charts.load('current', {
  callback: drawMarkersMap,
  packages: ['geochart'],
  mapsApiKey: 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});

function drawMarkersMap() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Color', 'Size'],
    ['US', 0, 100],
    ['Mexico', 1, 100],
    ['Canada', 1, 100],
    ['Brazil', 0, 100]
  ]);

  var options = {
    colorAxis: {
      colors: ['red', 'blue']
    },
    displayMode: 'markers',
    legend: 'none'
  };

  var chart = new google.visualization.GeoChart(document.getElementById('chart'));
  chart.draw(data, options);
};

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

＆＃13;

编辑

从工具提示中删除颜色和大小值（悬停时），
为自定义工具提示添加新列，
要么为工具提示提供额外的内容，
或者只是一个空白字符串（''）来隐藏颜色和大小

请参阅以下工作代码段...

＆＃13;

google.charts.load('current', {
  callback: drawMarkersMap,
  packages: ['geochart'],
  mapsApiKey: 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});

function drawMarkersMap() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Color', 'Size', {role: 'tooltip', type: 'string', p: {html: true}}],
    ['US', 0, 100, ''],
    ['Mexico', 1, 100, ''],
    ['Canada', 1, 100, ''],
    ['Brazil', 0, 100, '']
  ]);

  var options = {
    colorAxis: {
      colors: ['red', 'blue']
    },
    displayMode: 'markers',
    legend: 'none',
    tooltip: {
      isHtml: true
    }
  };

  var chart = new google.visualization.GeoChart(document.getElementById('chart'));
  chart.draw(data, options);
};

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

＆＃13;

注意html工具提示的选项...

    tooltip: {
      isHtml: true
    }

更改颜色标记Geochart

1 个答案: