当我单击该单元格时如何突出显示Anychart表中的单元格

Question

单击单元格时，有什么方法可以突出显示Anychart表中的单元格吗？

我尝试了以下代码，但是它不起作用。

table.listen("click",function(e){e.cellBorder(" #ff0000")});

Answer 1

不幸的是，当前版本的AnyChart 8.2.1表不支持事件。 但是您可以使用一些额外的代码来实现此功能。 有关详细信息，请检查以下示例。

 anychart.onDocumentReady(function () { // set stage var stage = anychart.graphics.create("container"); // create table var table = anychart.standalones.table(); // set table content table.contents([ [ null, "2003 Sales", "2004 Sales" ],[ "January", "$10000", "$12000" ],[ "February", "$12000", "$15000" ],[ "March", "$18000", "$16000" ],[ "April", "$11000", "$15000" ], [ "May", "$9000", "$14000" ] ]); var contents = table.contents(); // Set rows height. table.rowsHeight(70); table.getRow(0).fontWeight(900); table.getCol(0).width(70).fontWeight(900); // Set first column width 70 px and bold the text table.getCol(1).width(300); table.getCol(2).width(300); table.cellFill("#E1E1E1"); // Set table background color // adjust table border and position text in each cell into center table.cellBorder("#B8B8B8").vAlign("middle").hAlign("center"); // set table container and initiate draw table.container(stage).draw(); var colsCount = table.colsCount(); var widths = []; for(var i = 0; i<colsCount;i++) { var width = table.getCol(i).width(); widths.push(width); } var rowHeight = table.rowsHeight(); // buffer cell var buffer = 0; var cont = document.getElementById('container'); cont.addEventListener('click', function(e) { var x = e.clientX; var y = e.clientY; var indX = null; var indY = null; if(x < widths[0]) { indX = 0; } if(x> widths[0] && x<widths[0] + widths[1]) { indX = 1; } if(x > widths[0] + widths[1]) { indX = 2; } indY = Math.floor(y / rowHeight); // color selected cell if (contents[indY]) { table.getCell(indY,indX).fill("#0000ff", 0.2); } // color back if (buffer !=0) { buffer.fill("#e1e1e1") } // save selected cell to buffer if (contents[indY]) { buffer = table.getCell(indY,indX); } }); }); 

 html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; } 

 <link href="https://cdn.anychart.com/releases/8.2.1/css/anychart-ui.min.css" rel="stylesheet"/> <script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-base.min.js"></script> <script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-table.min.js"></script> <script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-exports.min.js"></script> <script src="https://cdn.anychart.com/releases/8.2.1/js/anychart-ui.min.js"></script> <div id="container"></div>