一个图形morris.js中的条形图和堆叠条形图
一个图形morris.js中的条形图和堆叠条形图
提问于 2016-06-14 21:17:06
是否可以在morris.js中将堆叠条形图和条形图放在一个图形中？我可以通过以下方式创建堆叠条形图：
Morris.Bar({
element: 'bar-example',
data: [
{x: '2011 Q1', y: 3, z: 2, a: 3},
{x: '2011 Q2', y: 2, z: null, a: 1},
{x: '2011 Q3', y: 0, z: 2, a: 4},
{x: '2011 Q4', y: 2, z: 4, a: 3}
],
xkey: 'x',
ykeys: ['y', 'z', 'a'],
labels: ['Opportunity', 'Not Completed', 'Completed'],
stacked: true
});但是我想在堆叠的列旁边添加一个额外的未堆叠的条形图。有可能吗？
其想法是显示已完成的任务及其与未完成的任务和堆叠在一起的机会的度量。
在这里谢谢
回答 2
Stack Overflow用户
发布于 2016-10-04 14:08:42
不，不能将一个条形图和另一个堆叠条形图合并到同一图中
Stack Overflow用户
发布于 2019-12-29 19:42:50
你可以这样做，你应该为单独的div和单独的元素创建Morris图。因此，将两个div放在彼此的顶部，并使div成为透明的顶部背景色。
<div class="row">
<div class="col-sm-12">
<div id="ContractorChart" style="z-index:0;position:fixed;width:80%;height:60vh">
</div>
<div id="ContractorChart2" style="z-index:100;position:fixed;background-color:transparent;width:80%;height:60vh"> </div>
</div>
</div>Morris图表的脚本代码
ChartShowLine();
ChartShowBar();
function ChartShowLine() {
$("#FirstElement").empty();
$(function () {
new Morris.Line({
element: 'FirstElement',
parseTime: false,
lineWidth: 4,
trendLine: false,
pointSize: 2,
xLabelAngle: 90,
dataLabels: false,
resize: true,
data: [
@foreach (var item in Model.ToList())
{
@*@:{ Week: "@(Convert.ToInt32(item.ContractorsWeek.Replace('W',' ')))", Plan_Cu: "@(item.Plan_Cu)", Plan_We: "@(item.Plan_We)", Prog_Cu: "@(item.Prog_Cu)", Prog_We: "@(item.Prog_We)" },*@
@:{ Week: "@(Convert.ToInt32(item.ContractorsWeek.Replace('W',' ')))", Plan_Cu: "@(Math.Round(item.Plan_Cu.Value,2))", Prog_Cu: "@(Math.Round(item.Prog_Cu.Value,2))" },
}
],
xkey: ['Week'],
ykeys: ['Plan_Cu', 'Prog_Cu'],
labels: [['Prog_Cu'], ['Plan_Cu']]
});
});
}
function ChartShowBar() {
$("#SecondElement").empty();
$(function () {
new Morris.Bar({
element: 'SecondElement',
parseTime: false,
lineWidth: 4,
trendLine: false,
pointSize: 2,
xLabelAngle: 90,
axes: false,
grid:false,
dataLabels: false,
resize: true,
data: [
@foreach (var item in Model.ToList())
{
@*@:{ Week: "@(Convert.ToInt32(item.ContractorsWeek.Replace('W',' ')))", Plan_Cu: "@(item.Plan_Cu)", Plan_We: "@(item.Plan_We)", Prog_Cu: "@(item.Prog_Cu)", Prog_We: "@(item.Prog_We)" },*@
@:{ Week: "@(Convert.ToInt32(item.ContractorsWeek.Replace('W',' ')))", Plan_We: "@(Math.Round(item.Plan_We.Value,2))", Prog_We: "@(Math.Round(item.Prog_We.Value,2))" },
}
],
xkey: ['Week'],
ykeys: ['Plan_We', 'Prog_We'],
labels: [['Prog_We'], ['Plan_We']]
});
});
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37813210
复制相关文章
相似问题
腾讯云开发者
