Question

我正在使用chart-js / ng2-charts作为角度2应用程序。

我可以显示条形图，但此刻，所有条形都是相同的颜色。我想根据价值选择不同的颜色。

能做到吗？

Answer 1

创建图表后，您可以使用以下函数循环遍历数据集并根据数据值更改颜色。

在此示例中，如果值高于50，则颜色会变为红色。

<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 5px;

}
</style>
</head>
<table style = "border: 1px solid black; border-style: collapse;">
<?   var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('All Exams Tracker');
var range = sheet.getDataRange();
  var values = range.getValues();
  var last_row = sheet.getLastRow();

  var today = new Date();?>

  <tr style="border: 1px solid black; padding: 10px;">

    <th style="border: 1px solid black; padding: 10px;">Exam Name</th>
    <th style="border: 1px solid black; padding: 10px;">Exam Date</th>
    <th style="border: 1px solid black; padding: 10px;">Priority</th>
    <th style="border: 1px solid black; padding: 10px;">College Predictor Status</th>
     <th style="border: 1px solid black; padding: 10px;">Rank Predictor Status</th>

</tr>

  <? for (var i =3 ;i < last_row;i++) {
   var temp = values[i][4];
    var e_date = new Date(temp);
    if ((( e_date - today)/(1000*60*60*24)) < 10 && e_date > today) {


   if (values[i][12] != ""){
  var col_status = "Live"}
  else
  if (values[i][11] != ""){
  col_status = "Uploaded and Tested"}
  else
  if (values[i][10] != ""){
  col_status = "Data Processed"}
  else
  if (values[i][9] != ""){
  col_status = "Template Ready"}

  else
  col_status = "Not initiated yet"

   if (values[i][19] != ""){
   var rank_status = "Live"}
  else
  if (values[i][18] != ""){
  rank_status = "Uploaded and Tested"}
  else
  if (values[i][17] != ""){
  rank_status = "Data Processed"}
  else
  rank_status = "Not Initiated yet"   


  ?>
<tr>

    <td style="border: 1px solid black; padding: 10px;"><?= values[i][2]?></td>
    <td style="border: 1px solid black; padding: 10px;"><?= values[i][4]?></td>
    <td style="border: 1px solid black; padding: 10px;"><?= values[i][8]?></td>
    <td style="border: 1px solid black; padding: 10px;"><?= col_status?></td>
    <td style="border: 1px solid black; padding: 10px;"><?= rank_status?></td>

</tr>
<? } }?>
</table>
<br><br>
<p><a href="https://docs.google.com/spreadsheets/d/1fzbRCvnNfuVTCEuRnncJxb1VW7f-tkSEywntzaTugZQ/edit#gid=0">Click Here For More Details</a></p>
</html>

JSFiddle演示：https://jsfiddle.net/6d0jsyxu/1/

根据值

1 个答案: