javascript - 当宽度拉伸(stretch)时 Canvas.js 显示上午 12 点(奇怪的错误)

Question

为什么工具提示是 canvas.js当我将鼠标悬停在这些点上时，图表显示“12:00AM: 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();
}

Answer 1

看起来当xAxis更改为更小的粒度(即:从日期更改为时间)时，工具提示格式会更改以匹配。

解决方案是按照 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();