根据条件检查对条形着色

时间:2018-01-28 04:53:58

标签: javascript css

我想根据条件检查为条形图上色。 我想根据条件检查显示条形颜色如下: 我正在展示专业水平'在某段时间内。

当专业知识专栏从“开始”开始时单词,他们必须为该时间轴栏显示红色颜色。

当专业知识专栏从“高级”专栏开始时单词,他们必须为该时间轴栏显示棕色颜色。

当专业知识专栏开始于中级'单词,他们必须为该时间轴栏提交黄色颜色。 请找到完整的演示:https://plnkr.co/edit/XrEgUo9oDJvxAXH03KMA?p=preview

目前我正在使用以下选项:

function drawChart() {
    var options = {
        colors:['red','brown','yellow'],
    };
    chart.draw(dataTable,options, {
      height: (dataTable.getNumberOfRows() * rowHeight) + rowHeight
    });
  }

有关如何根据输入字符串为每个里程碑提供不同颜色的时间线图表的任何输入。

2 个答案:

答案 0 :(得分:0)

您使用哪种字符串来检测您所处的级别。

使用:

var totalWords = "foo love bar very much."; 
var firstWord =totalWords.replace(/ .*/,'');

获得第一个单词(中级,高级等)

然后使用a和if语句输出您想要的颜色

  if (firstword == "advanced) {
     color = "brown";
  } else if(firstword == "intermediate"){
     color = "yellow";
  }

答案 1 :(得分:0)

首先在将行添加到表之前定义行,以便您可以迭代它们以构建具有相应颜色的数组或呈现图表。

然后在传递此函数的数据数组上调用map。

function getRowColor(row) {
  let firstWord = row[1].trim().split(' ')[0];
  if (firstWord === 'Beginning') return 'red';
  if (firstWord === 'Advanced') return 'brown';
  if (firstWord === 'Intermediate') return 'yellow';
}

const colors = rows.map(getRowColor);

我已经分叉了你的傻瓜here