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>

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

1 个答案: