使用jQuery排序时，Google表格图不持有属性

Question

以下是我的代码，我试图添加一个新的TD，它将仅以传奇的形式显示某种颜色，我可以成功地执行此操作删除了应用于新创建的TD的颜色，这是我的代码

function drawVisualization2(dataArray,divName) {
                var colors_array = ['#3366cc','#dc3912','#ff9900','#109618','#990099'];
                var dataTbl = google.visualization.arrayToDataTable(dataArray);
                var table1 = new google.visualization.ChartWrapper({
                    'chartType': 'Table',
                    'containerId': 'chart3',
                    dataTable: dataTbl,
                    'options': {
                        'width': '500px'
                    }
                });
                table1.draw();
                function tableCleanUp() {
                    google.visualization.events.addListener(table1.getChart(), 'sort', tableCleanUp2);
                    tableCleanUp2(colors_array);
                }
                function tableCleanUp2(colors_array) {
                    var count = 0;
                    $('#chart3 tr').each(function () {
                        if(count > 0){
                            jQuery(this).append("<td class='google-visualization-table-td' style='background-color: "+colors_array[count-1]+";'></td>");
                        }
                        count ++;
                    });
                }
                google.visualization.events.addListener(table1, 'ready', tableCleanUp);
            }

供参考，我将在此处提供的下表图https://developers.google.com/chart/interactive/docs/gallery/gallery/table

使用jQuery

创建TD后，我的表结构有点像这样。

<table class="google-visualization-table-table" cellspacing="0">
  <tbody>
       <tr class="google-visualization-table-tr-head">
           <td class="google-visualization-table-th gradient google-visualization-table-sorthdr">
           <td class="google-visualization-table-th gradient google-visualization-table-sorthdr">
           <td class="google-visualization-table-th gradient google-visualization-table-sorthdr">
           <td class="google-visualization-table-th gradient google-visualization-table-sorthdr">
      </tr>
      <tr class="google-visualization-table-tr-even">
           <td class="google-visualization-table-td"> PSYCHOSES</td>
           <td class="google-visualization-table-td">644300589.00</td>
           <td class="google-visualization-table-td">1683487522.00</td>
           <td class="google-visualization-table-td">38.27</td>
           <td class="google-visualization-table-td" style="background-color: #3366cc;">  </td>
      </tr>
      <tr class="google-visualization-table-tr-odd">
      <tr class="google-visualization-table-tr-even">
      <tr class="google-visualization-table-tr-odd">
      <tr class="google-visualization-table-tr-even">
</tbody>
</table>

对列进行排序后，我会在每个TD（标头）

中得到类似的东西

<td class="google-visualization-table-td" style="background-color: undefined;">

可以告诉我如何在排序之后保持背景色

Answer 1

我认为有一种更简单的方法可以获取您想要的东西，而不必求助于绘制后添加额外的列：使用数据范围添加到计算的列中：

var columns = [];
for (var i = 0; i < dataTbl.getNumberOfColumns(); i++) {
    columns.push(i);
}
columns.push({
    type: 'string',
    calc: function (dt, row) {
        // set the background of an empty cell to the color of this row in the colors array
        return {v: '', p: {style: 'background-color: ' + colors_array[row]}};
    }
});
var table1 = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'chart3',
    dataTable: dataTbl,
    options: {
        width: 500, // use an integer here, not a string
        allowHtml: true
    },
    view: {
        columns: columns
    }
});

jsfiddle：http：//jsfiddle.net/asgallant/89fzh/