Javascript 如何给谷歌柱状图上色'；每个酒吧都不一样，保持原样

虽然我已经成功地分别给谷歌图表的各个条涂上了颜色，但当我们将鼠标悬停在上面时，却无法将它们保留下来。它正在重置回蓝色（默认设置）

这是我所做的事情的一半

我试图通过以下多种方式控制悬停行为

这是我保存在外部（document.ready）但在脚本标记内部的

(一)

(二)

(三)

---

我一定是做错了什么，你能告诉我是什么，在哪里吗

我用下面的代码解决了这个问题。早些时候，我尝试使用向图表中动态添加行的方法创建图表（请访问我的），但使用下面的方法，我首先准备数据（将动态转换为静态），然后将静态数据添加到图表的“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);
}

---

如果您在这里发现任何错误或有更好的方法，请提供建议。

我已经修改了我的JSFIDLE，但仍然存在一些问题。请查收。

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

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

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