当我将鼠标悬停在积分上时,为什么canvas.js图表的工具提示显示“12:00 AM:0.0645840023”?
JSFiddle:http://jsfiddle.net/ssjqoa64/2/
如果我展开容器/窗口宽度,则显示12AM错误。非常奇怪的错误。
它应该显示日期。
window.onload=function () {
CanvasJS.addColorSet("colset", ["#337ab7"]);
var chart=new CanvasJS.Chart("chartContainer", {
colorSet: "colset", backgroundColor: "#f5f5f5", zoomEnabled: true, exportEnabled: true, exportFileName: "Earnings Chart", axisX: {
labelFontFamily: "tahoma"
}
, axisY: {
labelFontFamily: "tahoma",
}
, data: [ {
type: "area", dataPoints: [ {
x: new Date(2015, 12, 29), y: 0.016440000385046
}
, {
x: new Date(2015, 12, 30), y: 0.064584002396259
}
, {
x: new Date(2015, 12, 31), y: 0.0098100002505817
}
, {
x: new Date(2016, 1, 1), y: 0.34803301144257
}
, {
x: new Date(2016, 1, 2), y: 0.20135760693211
}
, ]
}
]
}
);
chart.render();
}
答案 0 :(得分:1)
看起来当xAxis
更改为更小的粒度(IE:从日期更改为时间)时,工具提示格式会更改为匹配。
解决方案是根据documentation使用自定义工具提示功能。
请在this fiddle找到有效的解决方案。
新的JavaScript:
CanvasJS.addColorSet("colset", ["#337ab7"]);
var chart=new CanvasJS.Chart("chartContainer", {
colorSet: "colset", backgroundColor: "#f5f5f5", zoomEnabled: true, exportEnabled: true, exportFileName: "Earnings Chart", axisX: {
labelFontFamily: "tahoma"
}
, toolTip: { // THIS IS NEW
contentFormatter: function(e) {
var date = e.entries[0].dataPoint.x;
var value = e.entries[0].dataPoint.y;
return CanvasJS.formatDate(date, "MMM DD YYYY") + ": " + value;
}
} // END OF NEW
, axisY: {
labelFontFamily: "tahoma"
}
, data: [ {
type: "area", dataPoints: [ {
x: new Date(2015, 12, 29), y: 0.02
}
, {
x: new Date(2015, 12, 30), y: 0.06
}
, {
x: new Date(2015, 12, 31), y: 0.01
}
, {
x: new Date(2016, 1, 1), y: 0.35
}
, {
x: new Date(2016, 1, 2), y: 0.21
}
, ]
}
]
}
);
chart.render();