javascript - 使用 morris.js 显示零结果的 "Bar"

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。

下面是 Morris 的例子:

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>

作为替代方案，您可以采用 Highcharts其中有一个特定的 plotOption .

下面是一个 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/