javascript 莫里斯图 - 如何格式化悬停标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24747099/
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
Morris Chart - How to Format Hover Label
提问by hakiko
I'm using morris chart. On x-axis I'm showing a date. Everything is fine except label. I want to show my label like x-axis format. How can I change the green circle's value to the red circle's value format?
我正在使用莫里斯图表。在 x 轴上，我显示了一个日期。除了标签，一切都很好。我想像 x 轴格式一样显示我的标签。如何将绿色圆圈的值更改为红色圆圈的值格式？
$(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); }
});
});
回答by dpineda
Here's the Answer https://stackoverflow.com/a/19886777/1449779
这是答案https://stackoverflow.com/a/19886777/1449779
hoverCallback instead of //yLabelFormat also works with line charts http://jsbin.com/UJUkosa/199/edit
hoverCallback 而不是 //yLabelFormat 也适用于折线图http://jsbin.com/UJUkosa/199/edit
回答by asdasd
http://jsbin.com/ziyupujewe/1/edit?html,js,output
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
});
回答by Fabio
you can use dateFormat option:
您可以使用 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();
}
回答by m s lma
dateFormat: function (d) {
var ds = new Date(d);
return ds.getHours() + ":" + ds.getMinutes();
}
it's dateFormat, been spinning on guinea pig wheel for hours till i noticed that dateFormat had a typo as dataFormat (that's for the green eclipse)
它是 dateFormat，在豚鼠轮上旋转了几个小时，直到我注意到 dateFormat 有一个错字作为 dat aFormat（这是针对绿色日食的）
for the red one, was auto formatted for me, you can peek at the source too!
对于红色的，已为我自动格式化，您也可以查看源代码！
