如何在表dc.datatable中的颜色代码行？ [英] How to color code rows in a table dc.datatable?

问题描述

在

特别是，如何更改行的颜色，使所有行名称红色为红色，名称蓝色为蓝色，名称白色为白色。

Javascript：

  items = [
 {Id ：01，名称：红色，价格：1.00，数量：1，时间戳：111}，
 {Id：02 ，数量：1，TimeStamp：222}，
 {Id：04，名称：Blue，价格：9.50，数量：10，TimeStamp：434}，
 {Id：03，Name：Red，Price：9.00，Quantity：2，TimeStamp：545}，
 {Id：06，Name：White，Price： 100.00，数量：2，时间戳：676}，
 {Id：05，名称：Blue，价格：1.20，数量：2，TimeStamp：777} 
]。 
 
 var ndx = crossfilter（items）; 
 
 
 var Dim = ndx.dimension（function（d）{return d.Name;}）
 dc.dataTable（＃Table）
 .width （250）.height（800）
 .dimension（Dim）
 .group（function（d）{return''}）
 .size 
 .columns（[
 function（d）{return d.Id;}，
 function（d）{return d.Name;}，
 function（d）{return d.Price;}，
 function（d）{return d.Quantity;}，
 function（d）{return d.TimeStamp;}，
 
]）
 .sortBy（function（d）{return d.Price;}）
 .order（d3.ascending）; 
 dc.renderAll（）; 
  

HTML：

 < table class ='table table-hover'id ='Table'> 
< thead> 
< tr class ='header'> 
< th> ID< / th> 
< th>名称< / th> 
< th>价格< / th> 
< th>数量< / th> 
< th>时间戳记< / th> 
 
< / tr> 
< / thead> 
< / table> 
  

如何考虑 dc.js 的大小， sortBy和order？

解决方案

你的代码中有语法错误和未知符号。这个想法是使用 chart.selectAll 来抓取行，然后根据数据对它们着色：

  .renderlet（function（chart）{
 chart.selectAll（'tr.dc-table-row'）
 .style（'background-color'，function （d）{
 return d？d.Name：null; 
}）
}）; 
  

这是我的分支： http://codepen.io/gordonwoodhull/pen/pvqpVV?editors=101

On the DC.js github, Stock Market Selection Strategy by Lon Riesberg is listed as an example of using the dc.js library.

He was able to color code the rows, as shown in the image below, which I'm trying to mimic.

See here for my code: http://codepen.io/chriscruz/pen/myaWvR?editors=101

In particular, how would I change the color of the rows so that all rows with the name 'Red' are red, with the name 'Blue' are Blue, and the name 'White' are white.

Javascript:

items = [
            {Id: "01", Name: "Red", Price: "1.00", Quantity: "1",TimeStamp:111},
            {Id: "02", Name: "White", Price: "10.00", Quantity: "1",TimeStamp:222},
            {Id: "04", Name: "Blue", Price: "9.50", Quantity: "10",TimeStamp:434},
            {Id: "03", Name: "Red", Price: "9.00", Quantity: "2",TimeStamp:545},
            {Id: "06", Name: "White", Price: "100.00", Quantity: "2",TimeStamp:676},
            {Id: "05",Name: "Blue", Price: "1.20", Quantity: "2",TimeStamp:777}
        ];

var ndx = crossfilter(items);


var Dim = ndx.dimension(function (d) {return d.Name;})
dc.dataTable("#Table")
  .width(250).height(800)
  .dimension(Dim)
  .group(function(d) {return ' '})
  .size(100)             // number of rows to return
  .columns([
  function(d) { return d.Id;},
  function(d) { return d.Name;},
  function(d) { return d.Price;},
  function(d) { return d.Quantity;},
  function(d) { return d.TimeStamp;},

])
  .sortBy(function(d){ return d.Price;})
  .order(d3.ascending);
dc.renderAll();

HTML:

<table class='table table-hover' id='Table'>
  <thead>
    <tr class='header'>
      <th>ID</th>
      <th>Name</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Timestamp</th>

    </tr>
  </thead>
</table>

How could this be done considering the only attributes that dc.js has are size, columns, sortBy, and order?

解决方案

You had a syntax error and an unknown symbol in your codepen there. The idea is to use chart.selectAll to grab the rows, and then color them based on the data somehow:

.renderlet(function(chart){
    chart.selectAll('tr.dc-table-row')
         .style('background-color', function(d) { 
             return d ? d.Name : null; 
         })
});

Here's my fork: http://codepen.io/gordonwoodhull/pen/pvqpVV?editors=101

这篇关于如何在表dc.datatable中的颜色代码行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！