Morris 绘制不同的 preUnits

Question

Morris 折线图是否可以有不同的 preUnits？

这是我的 javascript:

Morris.Line({
    element: 'payment_chart',
    data: json.data,
    xkey: 'm',
    ykeys: json.label,
    labels: json.label,
    parseTime: false,
    preUnits: "$",
    smooth: true,
    resize: true
});

我只有两行，一行代表美元价值，另一行代表数量。我的工具提示看起来像：

April
Sales: 
Amount: 9.99

我想做的是从销售中删除美元符号。

Answer 1

不，莫里斯线图不能有不同的 preUnits：

preUnits: Set to a string value (eg: '$') to add a label prefix all y-labels.

但您可以设置 hoverCallback 函数来完成这项工作：

Morris.Line({
  element: 'payment_chart',
  data: [
    { y: '2006', a: 100, b: 90 },
    { y: '2007', a: 75, b: 65 },
    { y: '2008', a: 50, b: 40 },
    { y: '2009', a: 75, b: 65 },
    { y: '2010', a: 50, b: 40 },
    { y: '2011', a: 75, b: 65 },
    { y: '2012', a: 100, b: 90 }
  ],
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Sales', 'Amount'],
  parseTime: false,
  preUnits: "$",
  smooth: true,
  resize: true,
  hoverCallback: function (index, options, content, row) {
    var indexAmount = 2;
    var txtToReplace = $(content)[indexAmount].textContent;
    return content.replace(txtToReplace, txtToReplace.replace(options.preUnits, ""));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet"/>

<div id="payment_chart"></div>

Morris 绘制不同的 preUnits

Morris charts different preUnits

morris.js