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/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

我认为有一种更简单的方法可以获得您想要的东西而无需在绘制后添加额外的列：使用DataView添加计算列：

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/

使用jquery排序时，Google表格图表不保留属性

1 个答案: