如何更改谷歌气泡图中的气泡颜色

Question

如何更改谷歌泡泡图泡泡颜色？.i没有从他们的api找到任何解决方案。

我需要 极端气泡颜色='红色'或颜色十六进制代码 高气泡颜色='橙色​​'或颜色十六进制代码 中泡颜色='黄色'或颜色十六进制代码 低气泡颜色='绿色'或颜色十六进制代码

我在下面给api和我的测试代码。请检查并给我一个解决方案。请帮助

Google Bubble Chart这是谷歌泡泡图api链接

测试代码如下：

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawSeriesChart);

    function drawSeriesChart() {


      var data = google.visualization.arrayToDataTable([
        ['core', 'Xscore', 'Yscore', 'Level',     'Size'],
        ['12.00',    6,              6,      'EXTREME',  4],
        ['4.84',    2.84,              1.36,      'MEDIUM',         2],
        ['6.6',    5.6,               1.84,      'HIGH',         3],
        ['7.73',    5.73,              2.78,      'HIGH',    3],
        ['7.05',    5.05,              2,         'MEDIUM',         2],
        ['4.49',    3.49,              1.7,       'LOW',    1],
        ['9.09',    4.09,              4.77,      'HIGH',    3],
        ['4.55',    2.55,              2.96,      'LOW',    1],
        ['4.6',    2.6,               1.54,      'LOW',         1],
        ['6',    3.6,               2.54,      'MEDIUM',         2],
        ['7.6',    3.6,               3.54,      'HIGH',         3],
        ['7.6',    3.6,               3.54,      'HIGH',         3],
        ['7.7',    3.6,               3.54,      'HIGH',         3],        
        ['10.6',    5.6,               4.54,      'HIGH',         3],
        ['6.6',    4.6,               1.24,      'MEDIUM',         2],
        ['3.6',    1.6,               1.34,      'LOW',         1],
        ['6.6',    1.6,               5.14,      'HIGH',         3],
        ['7.7',    1.7,               5.54,      'HIGH',         3],
        ['6.8',    1.8,               4.54,      'HIGH',         3],
        ['11.6',    5.6,               5.54,      'EXTREME',         4],
        ['7.09',    5.09,              2.05,      'HIGH',  3]
      ]);
      var options = {
        title: '',
        backgroundColor: 'transparent',
        hAxis: {title: 'Xscore', ticks: [1,2,3,4,5,6], textStyle:{color:'#999',bold:'1'},gridlines: {color: '#696966'},titleTextStyle:{italic:'0'}},
        vAxis: {title: 'Yscore', ticks: [1,2,3,4,5,6],textStyle:{color:'#999',bold:'1'},gridlines: {color: '#696966'},titleTextStyle:{italic:'0'}},
        bubble: {textStyle: {fontSize: 9,color:'#FFFFFF',auraColor:'none'}},
        chartArea:{backgroundColor:'#4c4c4b'},
        legend: { position: 'none' },
        animation:{easing:'in'}

      };

      var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
      chart.draw(data, options);
    }
    </script>


  <div class="widget-content shortcuts">
    <div id="series_chart_div" style="width: 100%; height: 800px;"></div>
  </div>

Answer 1

尝试这样的事情。我从数据中删除了“Level”列，在colorAxis中的相应数组中定义了值/颜色配对，并隐藏了相同的图例：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawSeriesChart);

function drawSeriesChart() {


  var data = google.visualization.arrayToDataTable([
    ['core', 'Xscore', 'Yscore', 'Size'],
    ['12.00',    6,              6,      4],
    ['4.84',    2.84,              1.36,           2],
    ['6.6',    5.6,               1.84,            3],
    ['7.73',    5.73,              2.78,       3],
    ['7.05',    5.05,              2,               2],
    ['4.49',    3.49,              1.7,        1],
    ['9.09',    4.09,              4.77,         3],
    ['4.55',    2.55,              2.96,        1],
    ['4.6',    2.6,               1.54,           1],
    ['6',    3.6,               2.54,            2],
    ['7.6',    3.6,               3.54,              3],
    ['7.6',    3.6,               3.54,          3],
    ['7.7',    3.6,               3.54,              3],        
    ['10.6',    5.6,               4.54,        3],
    ['6.6',    4.6,               1.24,              2],
    ['3.6',    1.6,               1.34,          1],
    ['6.6',    1.6,               5.14,             3],
    ['7.7',    1.7,               5.54,             3],
    ['6.8',    1.8,               4.54,            3],
    ['11.6',    5.6,               5.54,            4],
    ['7.09',    5.09,              2.05,       3]
  ]);
  var options = {
    title: '',
    backgroundColor: 'transparent',
    hAxis: {title: 'Xscore', ticks: [1,2,3,4,5,6], textStyle:{color:'#999',bold:'1'},gridlines: {color: '#696966'},titleTextStyle:{italic:'0'}},
    vAxis: {title: 'Yscore', ticks: [1,2,3,4,5,6],textStyle:{color:'#999',bold:'1'},gridlines: {color: '#696966'},titleTextStyle:{italic:'0'}},
    bubble: {textStyle: {fontSize: 9,color:'#FFFFFF',auraColor:'none'}},
    colorAxis: {values: [1, 2, 3, 4], colors: ['green', 'yellow', 'orange', 'red'], legend: {position: 'none'}},
    chartArea:{backgroundColor:'#4c4c4b'},
    legend: { position: 'none' },
    animation:{easing:'in'}

  };

  var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
  chart.draw(data, options);
}
</script>


<div class="widget-content shortcuts">
<div id="series_chart_div" style="width: 100%; height: 800px;"></div>
</div>

如果这有帮助，请告诉我。今天是我第一次使用谷歌图表，我来到这里寻找相同的信息，然后我自己想出来。如果有更好的方法，我渴望学习。 :)