javascript - 如何为 Google 柱形图的每个条形着色并保持原样

Question

虽然我已经成功地单独为谷歌图表的条形着色，但当我们将鼠标悬停在其上时无法保留它们。它正在重置回蓝色(默认情况下)。

这是我所做的 jsfiddle jsfiddle .

我尝试通过多种方式控制悬停行为，如下所示。

我将其保留在 (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');
        });
    });

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

Answer 1

我使用下面的代码解决了这个问题。早些时候，我尝试使用动态添加行到图表中来创建图表(请访问我的 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);
}

如果您发现这里有任何问题或者您有更好的方法，请提出建议。