Question

我使用莫里斯图表。在x轴上，我显示日期。除了标签，一切都很好。我想把我的标签显示为x轴格式。如何将绿色圆圈的值更改为红色圆圈的值格式？

graph picture

$(function() {
                "use strict";

                var monthNames = [ "Oca", "Şub", "Mar", "Nis", "May", "Haz","Tem", "Ağu", "Eyl", "Eki", "Kas", "Ara" ];


                // LINE CHART
                var line = new Morris.Line({
                    element: 'kelime-gecmisi',
                    resize: true,

                    data: [
                        {tarih: '2014-07-05', sira: 30},
                        {tarih: '2014-07-06', sira: 25},
                        {tarih: '2014-07-07', sira: 19},
                        {tarih: '2014-07-08', sira: 17},
                        {tarih: '2014-07-09', sira: 11},
                        {tarih: '2014-07-10', sira: 8},
                        {tarih: '2014-07-11', sira: 4},
                        {tarih: '2014-07-12', sira: 1},
//                        {tarih: '2014-07-13', item1: 1/3},
//                        {tarih: '2014-07-14', item1: 1/4},
//                        {tarih: '2014-07-15', item1: 1/9}
                    ],
                    xkey: 'tarih',
                    ykeys: ['sira'],
                    xLabels:'day',
                  //  continuousLine:false,
                    labels: ['Sıra'],
                    lineWidth: 2,
                    lineColors: ['#00A65A'],
                    hideHover: 'auto',
                    ymin:'auto 1', 
                    ymax:'auto 30',
                    gridIntegers: true,




                    xLabelFormat: function(d) {
                    return d.getDate()+' '+monthNames[d.getMonth()]+' '+d.getFullYear(); 
                    },

                    //yLabelFormat: function(y) { if (y === 0) return 30; else return Math.round(1/y); }


                });
            });

Answer 1

这是答案https://stackoverflow.com/a/19886777/1449779

hoverCallback而不是// yLabelFormat 也适用于折线图http://jsbin.com/UJUkosa/199/edit

Answer 2

http://jsbin.com/ziyupujewe/1/edit?html,js,output

{ y: ..., x: ..., label: "my own label"},'

...
Morris.Line({
    hoverCallback: function(index, options, content) {
        var data = options.data[index];
        $(".morris-hover").html('<div>Custom label: ' + data.label + '</div>');
    },
    ...
    other params
});

Answer 3

您可以使用dateFormat选项：

"dateFormat": function(unixTime) {
    var d = new Date(unixTime);
    var monthNames = [
        "Oca", "Şub", "Mar", "Nis", "May", "Haz",
        "Tem", "Ağu", "Eyl", "Eki", "Kas", "Ara"
    ];
    return d.getDate() + ' ' + monthNames[d.getMonth()] + ' ' + d.getFullYear();
}

Answer 4

dateFormat: function (d) {

            var ds = new Date(d);
            return ds.getHours() + ":" + ds.getMinutes();
        }

它是dateFormat，在豚鼠轮上旋转几个小时，直到我发现dateFormat有一个打字错误为dat a 格式（这是绿日食）

对于红色的，我是自动格式化的，你也可以偷看来源！

Morris图表 - 如何格式化悬停标签

4 个答案: