如何为谷歌柱状图上色'it’每个酒吧都不一样，保持原样

How to color Google Column Chart's every bar differently and keep them as it is

本文关键字：酒吧不一样 it 谷歌更新时间：2023-09-26

虽然我已经成功地将谷歌图表的条形图单独着色，但当我们将鼠标悬停在它上面时，却无法保持它们。它正在重置为蓝色（这是默认值）。

以下是我所做的事情。

我试着用多种方式控制悬停行为，如下所示。

我把这个放在外部（document.ready），但放在脚本标记内部。

1）

    $('#chart_div').hover(
      function() {
        $('#chart_client').hide(); // chart_client is another google chart div. 
      }, function() {              // just for testing I was doing hide/show of that.
        $('#chart_client').show();
      }
    );

2）

    $("#chart_div").on({
        mouseenter: function () {
          $('#chart_client').hide();
        },
        mouseleave:function () {
           $('#chart_client').show();
        }
    },'rect');

3）

   google.visualization.events.addListener('#chart_div', 'ready', function () {
        $('#chart_div rect').mouseover(function (e) {
            alert('hello');
        });
    });

我一定是做错了什么，你能告诉我是什么地方吗。

我用下面的代码解决了这个问题。早些时候，我试图通过在图表中动态添加行来创建图表（请访问我的jsfiddle），但通过下面的方法，我首先准备数据（将动态转换为静态），并将静态数据添加到图表的"arrayToDataTable"方法中。

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawUserKeywordChart);
  function drawUserKeywordChart() {
        var val = 'Tax:47;Finance:95;Awards:126;Bank:137;Debt:145;';            
        var length = val.length;
        var array = [];
        //preparing data
        while(length>0){
            var sepAt = val.indexOf(";");
            var value = parseInt(val.substring(val.indexOf(":")+1, sepAt));
            array.push(val.substring(0, val.indexOf(":")));
            array.push(value);
            val = val.substring(val.indexOf(";")+1, length);
            length = val.length;
        }
        var data = google.visualization.arrayToDataTable([
                  ['Keyword', 'Occurences', { role: 'style' }],
                  [array[0], array[1], '#8AA3B3'],
                  [array[2], array[3], '#A9B089'],    
                  [array[4], array[5], '#848C49'],
                  [array[6], array[7], '#44464A'],
                  [array[8], array[9], '#704610'],
            ]);
       var options = {
                      title: 'Keyword Matches',
                      width: 660, 
                      height: 450,
                      titleTextStyle:{bold:true,fontSize:20},                 
                      legend:{position:'none'}
                    };              
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_keyword1'));                
    chart.draw(data, options);
}

如果你发现这里有什么问题，或者你有更好的方法，请提供建议。