Javascript 使用jquery时基于时间的多颜色单行

我需要生成一个图，就像我在这里展示的那样

X轴将是时间序列。有人能推荐一个JQuery插件来生成这样的图吗

---

谢谢

请尝试下表，并根据您的要求进行更改

变量图=（函数（）{
var urgentTitle=“紧急”，
$graph=$（'.graph'），
$barContainer=$graph.find（'.graph bars'），
$markers=$（'.markers'），
$graphTitles=$（'.graph titles'），
max=null，
限制=空；
var init=函数（数据）{
max=getMaxValue（数据）；
极限=最大值+数学上限（最大值*0.05）；
$barContainer.empty（）；
$markers.empty（）；
$graphTitles.empty（）；
$（“#紧急标题”）。文本（urgentTitle）；
设置标记（$markers，limit）；
if（data.length）buildTeamRows（$barContainer，$graphTitles，data，limit）；
else buildUserRows（$barContainer，$graphTitles，data，limit）；
};
//返回与限制相关的百分比值
var getPercentage=函数（值、限制）{
返回值/限制*100+“%”；
};
var getMaxValue=函数（数据）{
var最大值=0；
var总和=0；
if（数据长度）{
对于（x=0；x最大）{
最大=总和；
}
}
}否则{
最大值=Math.max（data.active、data.newCount、data.newFromBatch）；
}
回报最大；
};
var setMarkers=函数（$selector，limit）{
var增量=极限值/5；
var值=0；
var值=[]；
var-leftOffset=0；
//创建标记值数组
while（值<限制）{
values.push（数学圆整（value））；
值+=增量；
}
值。推送（限制）；
对于（变量x=0；x最大）{
最大=价值；
标题类=指数；
titleCount=数值；
}
}
});
//如果Active是最大值，请检查Active的紧急部分是否大于Active
如果（标题类=='active'&&data[x].urgent>=（data[x].active-data[x].urgent））{
标题类=‘紧急’；
titleCount=数据[x]。紧急；
}
//渲染行元数据
变量$titleSet=$（''）；
$titleSet.find（'.graph title name'）.text（数据[x].userName）；
$titleSet.find（'.graph title count'）.addClass（titleClass）.text（titleCount）；
$titleSelector.append（$titleSet）；
}
};
var renderFragment=函数（$selector、type、value、limit）{
var$rowFragmentTmpl=$（''）；
var百分比=getPercentage（值、限制）；
$rowFragmentTmpl.attr（'data-value'，value）；
$selector.append（$rowFragmentTmpl.addClass（类型））；
setTimeout（函数（）{
$rowFragmentTmpl.css（{'width'：percentage}）；
}, 1);
};
var buildUserRows=函数（$barSelector，$titleSelector，data，limit）{
renderUserRow（$barSelector，$titleSelector，'urgent'，data.urgent，limit，urgentTitle）；
renderUserRow（$barSelector，$titleSelector，'active'，data.active，limit，'active'）；
renderUserRow（$barSelector，$titleSelector，'newCount'，data.newCount，limit，'New'）；
renderUserRow（$barSelector，$titleSelector，'newFromBatch'，data.newFromBatch，limit，'newFromBatch'）；
};
var renderUserRow=函数（$barSelector、$titleSelector、类型、值、限制、标题）{
var百分比=getPercentage（值、限制）；
var$graphBar=$（''）.attr（{'id'：'userGraph-'+类型，'data value'：value}）；
$barSelector.append（$graphBar）；
setTimeout（函数（）{
$graphBar.css（{'width'：percentage}）.addClass（type）；
},1);
变量$titleSet=$（''）；
$titleSet.find（'.graph title name'）.text（title）；
$titleSet.find（'.graph title count'）.addClass（type）.text（value）；
$titleSelector.append（$titleSet）；
};
返回{
init:init
}
})();
//文件准备就绪
$（函数（）{
//虚拟数据
变量数据集=[
{
现行：5，
新计数：4，
newFromBatch:40，
紧急：1，
用户标识：“莫莉”，
用户名：“莫莉”
},
{
现役：21，
新计数：2，
newFromBatch:5，
紧急：10，
用户名：“杰克”，
用户名：“杰克”
},  
{
现役：25，
新计数：4，
newFromBatch:3，
紧急：20，
用户ID：“tracy”，
用户名：“Tracy”
},  
{
现行：10，
新计数：24，
newFromBatch:4，
紧急：2，
用户标识：“诺兰”，
用户名：“诺兰”
},  
];
变量数据单={
现役：25，
新计数：4，
newFromBatch:3，
紧急：20，
用户名：“ryan”，
用户名：“Ryan Scofield”
};
//初始化图形
init（数据集）；
$（'#teamGraph'）。在（'click'，函数（e）上{
init（数据集）；
});
$（'#userGraph'）。在（'click'，函数（e）上{
graph.init（dataSingle）；
});
});
正文{
填充：20px；
}
/*机会图*/
.图表标题{
显示：内联块；
宽度：200px；
垂直对齐：顶部；
利润率：20px 0 20px；
填充：0；
}
.图表标题{
边缘底部：1米；
宽度：100%；
线高：30px；
溢出：隐藏；
}
.图表标题名称{
浮动：左；
}
.图表标题计数{
浮动：对；
填充：0 10px；
高度：30px；
边界半径：20px；
颜色：#fff；
}
.图表{
显示：内联块；
位置：相对位置；
保证金：20px 20px 20px 10px；
填充：0；
宽度：500px；
}
.图形栏{
显示：块；
溢出：隐藏；
边缘底部：1米；
}
.图形条片段{
宽度：0；
高度：30px；
浮动：左；
背景色：#ccc；
-webkit过渡：宽度。4s容易进入；
}
.单条图形条{
高度：30px；
背景色：#ccc；
-webkit过渡：宽度。4s容易进入；
边框右上角半径：4px；
边框右下半径：4px；
}
.图形条片段：最后一个子项{
边框右上角半径：4px；
边框右下半径：4px；
}
.紧急{
背景：#c9575e；
背景：-moz线性梯度（顶部，#c9575e 0%，#c12e41 100%）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0%，#c9575e）、颜色停止（100%，#c12e41））；