时间戳

首页 > 解决方案 > Hide ykeys but show label on morris js

morris.js - Hide ykeys but show label on morris js

问题描述

could you help me with this problem? I have this graphic in morris js where I show 2 variables, what I need is to generate a label of the sum without it being graphed.

  Morris.Bar({
    element: 'bar-example2',
    data: [     
 { y: '2018-05-21', a: 0, b: 8472, c: 8472 },          
 { y: '2018-05-20', a: 0,  b: 8391, c: 20 },         
 { y: '2018-05-19', a: 0,  b: 9031, c: 9031 },          
 { y: '2018-05-18', a: 0,  b: 8974, c: 8974 },          
 { y: '2018-05-17', a: 360,  b: 9095, c: 9455 },         
 { y: '2018-05-16', a: 0,  b: 10017, c: 10017 },
 { y: '2018-05-15', a: 0, b: 9576, c: 9576 }

    ],
    xkey: 'y',
    ykeys: ['a','b','c'],
    labels: ['Mot1', 'Mot2', 'Total'],
    stacked: true
    });

I have this

Example of current chart output

I want this

Example of wanted chart output

标签： morris.js

解决方案

您可以尝试使用hoverCallback选项中的功能来自定义其内容。以下代码应该可以完成这项工作：

  hoverCallback: function (index, options, content, row) {
    console.log(row);
    return 'Your value is: '+parseFloat(row.a+row.b);
  },

你可以在这里查看帮助：http: //morrisjs.github.io/morris.js/bars.html

推荐阅读