使用 morris.js 显示零结果的“条形图”

Question

我正在使用Morris.js 在图表中显示数据，我想为每个选项显示一个条形图，即使它为零，目前我明白了：

您可以看到 21-25 和 26-30 年龄组的“HIV Instant”的值为 0，我如何为每个结果显示一条线（只是一条细线）？莫里斯有可能吗？我搜索了docs 的条形图并搜索了谷歌和 SO 但找不到任何东西？任何帮助表示赞赏。干杯

这是生成上述图表的代码：

// break up the object
var age_barParts = [];
$.each( results_by_age_chart, function(key , val){
    age_barParts.push({
        'test': key,
        'u16': val['u16'],
        '16-20': val['16-20'],
        '21-25': val['21-25'],
        '26-30': val['26-30'],
        '31-49': val['31-49'],
        '50+': val['50+']
    });
});
//build the graph
var age_bar = Morris.Bar({
    element: 'age_bar',
    data: age_barParts,
    xkey: ['test'],
    ykeys: ['u16', '16-20', '21-25', '26-30', '31-49', '50+'],
    labels: ["Under 16s", "16 to 20", "21 to 25", "26 to 30", "31 to 49", "Over 50s"],
    barColors: color_array,
    hideHover: 'auto',
    resize: 'true',
    gridTextSize: 16,
    gridTextColor: '#5cb85c',
    xLabelAngle: '70',
    resize: true,
    padding: 40
});

Answer 1

在 Morris.js 中没有强制为零值绘制线条的选项，但您可以将它们设置为非常低的非零值，例如 0.05。

下面是莫里斯的一个例子：

var age_barParts = [];
age_barParts.push({
      'test': 'HIV',
      'u16': 3,
      '16-20': 5,
      '21-25': 1,
      '26-30': 2,
      '31-49': 8,
      '50+': 2
});
age_barParts.push({
      'test': 'HIV Instant',
      'u16': 1,
      '16-20': 4,
      '21-25': 0.05,
      '26-30': 0.05,
      '31-49': 7,
      '50+': 3
});
var age_bar = Morris.Bar({
    element: 'age_bar',
    data: age_barParts,
    xkey: ['test'],
    ykeys: ['u16', '16-20', '21-25', '26-30', '31-49', '50+'],
    labels: ["Under 16s", "16 to 20", "21 to 25", "26 to 30", "31 to 49", "Over 50s"],
    hideHover: 'auto',
    resize: 'true',
    gridTextSize: 16,
    gridTextColor: '#5cb85c',
    xLabelAngle: '70',
    resize: true,
    padding: 40
});

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

<div id="age_bar" style="height: 450px;"></div>

作为替代方案，您可以采用具有特定 plotOption 的 Highcharts。

以下是 Highcharts 的示例：

$(function () {
    $('#age_bar').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'HIV stats'
        },
        xAxis: {
            categories: ['HIV', 'HIV Instant']
        },
        yAxis: {
            title: {
                text: '#'
            }
        },
        plotOptions: {
            column: {
            minPointLength: 3
            }
        },
        colors: ["#0b62a4","#7a92a3","#4da74d","#afd8f8","#edc240","#cb4b4b","#9440ed"],
        series: [{
            name: 'u16',
            data: [1, 0]
        }, {
            name: '16-20',
            data: [5, 4]
        }, {
            name: '21-25',
            data: [1, 0]
        }, {
            name: '26-30',
            data: [2, 0]
        }, {
            name: '31-49',
            data: [8, 7]
        }, {
            name: '50+',
            data: [2, 3]
        }],
    });
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>

<div id="age_bar" style="height: 450px;"></div>

更新：

这是一个 jsfiddle（用于 Morris），它修改了将 0.05 替换为 0 的悬停图例。您可以通过编辑 hoverCallback 函数来改进这种方法：

https://jsfiddle.net/beaver71/zm8wt4pj/

Answer 2

如果您从咖啡脚本文件编译，只需在 morris.bar.coffee 中的 lastTop += size 之后添加

if size == 0 then size = 1

否则，如果你只是想修改javascript文件，只需在morris.js中的lastTop += size;之后添加

if (size === 0) { size = 1; }