Question

是否可以为Morris折线图设置不同的preUnit？

这是我的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: $3
Amount: $249.99

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

Answer 1

不，你不能为莫里斯折线图提供不同的preUnits：

preUnits：设置为字符串值（例如：'$'），为所有y标签添加标签前缀。

但您可以设置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>

莫里斯绘制了不同的preUnits

1 个答案: