Question

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

DONUT CHARTS

JS CODE：

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：

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']
        });

有没有办法显示数值（由php变量$ fb_ *提供）来自javascript代码的PERCENTAGE FORMAT （不是在php中回显变量/ total * 100）？

Answer 1

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

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

请参阅：http://morrisjs.github.io/morris.js/donuts.html

对于条形图，您需要使用悬停回调

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)+'%';
}

请参阅：http://morrisjs.github.io/morris.js/bars.html

Answer 2

要添加百分比符号，请使用此属性。我没有在文档中找到它，但是它运行完美。 postUnits：[“％”]

Answer 3

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

Morris js以百分比格式显示值

3 个答案: