javascript Morris js 以百分比格式显示值

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/23717001/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 01:26:28  来源:igfitidea点击:

Morris js Display values in percentage format

javascriptmorris.js

提问by Aaron Ullal

I am drawing some charts for a school project pulling data from a mysql database. Here is what I've done so far:

我正在为一个从 mysql 数据库中提取数据的学校项目绘制一些图表。这是我到目前为止所做的:

DONUT CHARTS

甜甜圈图

JS CODE:

JS代码:

Morris.Donut({
    element: 'donut-quanti',
    data: [
    {label: "USE FACEBOOK", value: <?php echo $fb_yes;?> },
    {label: "DON'T USE FACEBOOK", value: <?php echo $fb_no;?>}
    ]
    });

BAR CHARTS

条形图

JS CODE:

JS代码:

Morris.Bar({
        element: 'bars-status',
        data: [
        {x:'RARELY',a:<?php echo $fb_rar;?>},
        {x:'EV WEEK.',a:<?php echo $fb_ew;?>},
        {x:'EV DAY',a:<?php echo $fb_ed;?>},
        {x:'MULT. TIMES PER DAY',a:<?php echo $fb_mtd;?>}                   
        ],
        xkey:'x',
        ykeys:'a',
        labels:['TOTAL']
        });

Is there a way to display the numeric values (rapresented by the php variables $fb_*) IN PERCENTAGE FORMAT from javascript code(not echoing variable/total * 100 in php ) ?

有没有办法从 javascript 代码中以百分比格式显示数值(由 php 变量 $fb_* 表示) (在 php 中不回显变量/总计 * 100)?

回答by chiliNUT

For the donut you need to use the formatterparameter

对于甜甜圈,您需要使用formatter参数

formatter: function (value, data) { return (value/total *100) + '%'; }

See: http://morrisjs.github.io/morris.js/donuts.html

见:http: //morrisjs.github.io/morris.js/donuts.html



For the bar you need to use hover callback

对于栏,您需要使用悬停回调

hoverCallback: function (index, options, content) {
  var row = options.data[index];
  //assumes you have already calculated the total of your own dataset
  return (value/total *100)+'%';
}

See: http://morrisjs.github.io/morris.js/bars.html

见:http: //morrisjs.github.io/morris.js/bars.html

回答by jaykwapong

To add the percentage symbol, please use this property. I did not find this in the docs but it works perfectly. postUnits: ["%"]

要添加百分比符号,请使用此属性。我没有在文档中找到这个,但它工作得很好。帖子单位:["%"]

回答by Kishore Thangapandi

donutChartOptions = {
    resize: true,
    colors: ["#8e54e9", "#4776e6"],
    formatter: function (value) { return (value) + '%'; }
}