处理莫里斯图

Question

所以我正在尝试使用 Morris Charts 构建一个折线图，它将根据一年中的票务状态显示票数。

问题是我对 xKey 和那里的内容有点困惑。

解释我正在尝试做的事情的图像

相反，我得到两行，一行用于状态，另一行用于计数

数据

 {period: "2010-09", status: 1, count: 20}
,{period: "2010-10", status: 1, count: 50}
,{period: "2010-10", status: 2, count: 34}
,{period: "2010-11", status: 2, count: 70}

代码

Morris.Area({
            element: 'morris-area-chart'
            , data: data
            , xkey: 'period'
            , ykeys:  ['count','status']
            , labels: ['processing', 'done']
});

我知道我搞砸了，但我不知道是什么。

Answer 1

您应该这样更改您的数据：

 {period: "2010-09", status1Count: 20, status2Count: 12}
,{period: "2010-10", status1Count: 50, status2Count: 34}
,{period: "2010-11", status1Count: 70, status2Count: 25}

和图表代码：

Morris.Area({
            element: 'morris-area-chart'
            , data: data
            , xkey: 'period'
            , ykeys:  ['status1Count','status2Count']
            , labels: ['processing', 'done']
});

处理莫里斯图

Dealing with Morris Chart

javascript

morris.js